Accordions

Use accordion groups to organize related content so that it each section can be expanded and contracted. Accordions may also be used individually by emitting the ab-accordion-group tag.

Props:

Component	Prop	Description	Default Value
ab-accordian-group	allowMultipleOpen	Determines whether or not multiple accordian boxes within an accordian group may be opened simultaneously.	False

Group

This is a list inside of an accordion...

Item 1
Item 2
Item 3

This is another example accordion.

Individual

Individual accordion content goes here.


<h3>Group</h3>
<ab-accordion-group>
    <ab-accordion v-bind:title="'Accordion Item One'">
        <p>This is a list inside of an accordion...</p>
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ol>
    </ab-accordion>
    <ab-accordion v-bind:title="'Accordion Item Two'">
        <div>
            <p>This is another example accordion.</p>
        </div>
    </ab-accordion>
</ab-accordion-group>
<br /><br />
<h3>Individual</h3>
<ab-accordion v-bind:title="'Accordion Item One'">
    <p>Individual accordion content goes here.</p>
</ab-accordion>

Alerts

Alerts keep users informed about important changes.

Place alerts in a containing element with the alerts-container-sticky class to keep them sticky at the top of the page. It is recommended that only one element have the alerts-container-sticky class on any given page.

A notification

A notification with a close button

A notification that gives the user some information

A notification that lets the user something has succeeded

A notification that warns the user about something

A notification that lets the user know an error has occured

<div class="alerts-container">
    <div class="alert">A notification</div>
    <div class="alert">
        A notification with a close button
        <button class="alert-close-button">&times;</button>
    </div>
    <div class="alert-info">A notification that gives the user some information</div>
    <div class="alert-success">A notification that lets the user something has succeeded</div>
    <div class="alert-warn">A notification that warns the user about something</div>
    <div class="alert-error">A notification that lets the user know an error has occured</div>
</div>

Cards

Cards are containers with minimal styling and a flexible in design. Use cards as they are to hold content, or customize them as needed.

This is a card without customization.

Card with a set witdh and height

Comment Card

First Name Comments


<div class="card margin-bottom">
    This is a card without customization.
</div>
<div class="flow-right">
    <div class="card padded margin-bottom margin-right" style="width: 16rem; height: 20rem;">
        <h3>Card with a set witdh and height</h3>
    </div>
    <div class="card flow-down margin-bottom" style="width: 23rem;">
        <h3>Comment Card</h3>
        <label for="input-fname">First Name</label>
        <input id="input-fname" type="text">
        <label for="text-area-comments">Comments</label>
        <textarea id="text-area-comments"></textarea>

        <button>Submit</button>
    </div>
</div>

Date Pickers

Date pickers allow the user to choose a date.

Headers - Demo

Main site header

The main site header should have the header-main class.
The ArcBest logo should be the first element in the main header, with the logo class and should link to the home page of the site.
User information, if applicable, should be put in a div after the logo with the header-user-information class.

<header class="header-main">
    <a href="#"><img src="[panthercdnpath]/Images/ARCB_grey.jpg" alt="ArcBest Logo" class="logo"></a>
    <div class="header-user-information">
        Welcome,<br>
        <span class="user-name">Test User</span><br>
        <a href="#">Logout</a>
    </div>
</header>

Secondary header

The secondary site header can be used for the page name or other important information. It should have the header-secondary class and should follow the main header in the source order.

Popups

Popups can be used for modals and dialogs.

Vue.js implementation

Props

Prop	Description	Default Value
closable	Whether this popup can be closed.	true
width	How wide this popup should be. (CSS units)	'90%'
height	How tall this popup should be. (CSS units)	'auto'
max-height	Max height for this popup. (CSS units)	'70vh'
top-offset	How far the popup should be positioned from the top of the viewport. (CSS units)	'10%'
title	This popup's title.	''

Popup example

<ab-popup v-if="showPopup" v-on:close="showPopup = false" title="Example">
    <p>Popup example</p>
</ab-popup>

<p>
    <button class="button-link" v-on:click="showPopup = true">Show popup</button>
</p>

Note: if you need to close the popup from an event raised by the popup itself, use slot scoping to do the following:

<ab-popup v-if="showPopup2" v-on:close="showPopup2 = false" title="Example">
    <template scope="{ closePopup }">
        <p>Popup example</p>
        <button v-on:click="closePopup">Close popup</button>
    </template>
</ab-popup>

<p>
    <button class="button-link" v-on:click="showPopup2 = true">Show popup</button>
</p>

JQuery implementation

Options:

Property	Description	Type	Default Value	Options
width	Width of popup in percent.	string	undefined	0-100%
type	Type of popup.	string	popup	popup, dialog
allowClose	Whether to allow the user to close the popup.	boolean	true	true, false
showOverlay	Whether to show overlay.	boolean	true	true, false
disableScroll	Whether to allow scrolling if content overflows.	boolean	false	true, false

Notes

If you are AJAXing content into a popup, target .content inside the popup instead of the popup itself.
If your popup contains a form, use jQueryUI's dialog method to create your popup.

Popups

Click OK to close this dialog.

HTML

<!-- Default popup -->
<button id="popup-trigger">Display popup</button>
<div id="popup" class="popup" data-title="This is a popup">
	<p>This is some text</p>
</div>

<!-- Dialog -->
<div id="dialog" data-title="This is a dialog">
	<p>Click OK to close this dialog.</p>
	<button onclick="closeDialog()">Close dialog.</button>
</div>

JS

$('.popup').popup();
$('#popup-trigger').click(function () {
	$('#popup').popup({ action: 'open' });
});

$('#dialog').popup({ type: 'dialog' });
    $('#dialog-trigger').click(function () {
        $('#dialog').popup({ action: 'open' });
});

Tabs

Vertical or horizontal tabs.

Horizontal

Tab 1 (Selected) Tab 2 Tab 3 Tab 4 Tab 5

Vertical with Headers

Tab Header Tab 1 (Selected) Tab 2 Tab 3 Tab Header Tab 4 Tab 5

<div class="tabs">
    <a href="#tabs" class="tab tab-selected">Tab 1 (Selected)</a>
    <a href="#tabs" class="tab">Tab 2</a>
    <a href="#tabs" class="tab">Tab 3</a>
    <a href="#tabs" class="tab">Tab 4</a>
    <a href="#tabs" class="tab">Tab 5</a>
</div>

<div class="tabs tabs-vertical">
    <span class="tab-header">Tab Header</span>
    <a href="#tabs" class="tab tab-selected">Tab 1 (Selected)</a>
    <a href="#tabs" class="tab">Tab 2</a>
    <a href="#tabs" class="tab">Tab 3</a>
    <span class="tab-header">Tab Header</span>
    <a href="#tabs" class="tab">Tab 4</a>
    <a href="#tabs" class="tab">Tab 5</a>
</div>

Utilities

Utility classes are available to quickly implement commonly used styles such as setting spacing, borders, and colors.

Spacing

Avoid using top or left margin to prevent issues with margin collapsing.

Class	Description
padded	Set all padding values to $padding-standard.
not-padded	Set all padding values to zero.
padding-top, padding-bottom, padding-left, padding-right	Sets the specified padding value to $padding-standard.
no-margin-bottom	Set margin-bottom value to zero.
margin-bottom, margin-right	Set specified margin value to $margin-standard.

Colors

These following color utility classes may be used in styling custom components or customizing components from third-party libraries.

Background Colors

.background-color-background
.background-color-foreground
.background-color-primary
.background-color-success
.background-color-error
.background-color-warn
.background-color-info

Text Colors

.text-color-background
.text-color-foreground
.text-color-primary
.text-color-success
.text-color-error
.text-color-warn
.text-color-info

Typography

Utility classes to adjust text size or alignment.

.text-small

.text-large

.text-left

.text-center

.text-right

Borders

Border utility classes allow you to quickly set or remove borders from elements.

.border

.border-left

.border-top

.border-bottom

.border-right

Display

Classes that modify how elements are displayed.

Class	Description
.hidden	Hides an element by setting its display property to hidden.

Loading animation

The loading class can be given to an element to give it a loading animation. If the loading animation is too large, loading-small and loading-tiny are smaller versions of it.

Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.

Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.

Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.

Wells

Wells serve as a container for large sections of content.

Well #1

This is a well.

Well #2

This well holds a few cards.

Card one

Card two

Card three


<div class="well margin-bottom">
    <h3>Well #1</h3>
    <p>This well is only holding text, but could be used for much more.</p>
</div>
<div class="well">
    <h3>Well #2</h3>
    <p>This well holds a few cards.</p>
    <div class="flow-right flow-justify-center flow-space-between">
        <div class="card" style="width: 28rem; height: 16rem;">Card one</div>
        <div class="card" style="width: 28rem; height: 16rem;">Card two</div>
        <div class="card" style="width: 28rem; height: 16rem;">Card three</div>
    </div>
</div>