Typography

The CDN stylesheets use one font family: Arial. It was chosen because it is the closest web safe font to Helvetica Neue, the font family specified in the ArcBest branding guidelines.

Headings

Headings should be used to label sections of text content.

Resources

MDN Documentation

Major heading

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.

Section heading

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.

Another section heading

Subheading

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.

Another subheading

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.

<h1>Major heading</h1>

<p>
    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.
</p>

<h2>Section heading</h2>

<p>
    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.
</p>

<h2>Another section heading</h2>

<h3>Subheading</h3>

<p>
    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.
</p>

<p>
    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.
</p>

<h3>Another subheading</h3>

<p>
    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.
</p>

Links

Links lead users to a different page or further information.

This is a link

<a href="#">This is a link</a>

Links can be styled to look like buttons.

This link looks like a button.

<a href="#" class="button">This link looks like a button.</a>

Lists

Lists organize written information for users.

Unordered list

Item 1
Item 2
Item 3

Ordered list

Item 1
Item 2
Item 3

Nested list

Item 1
1. Subitem 1
2. Subitem 2
Item 2
Item 3

<h3>Unordered list</h3>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<h3>Ordered list</h3>
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

<h3>Nested list</h3>
<ol>
    <li>
        Item 1

        <ol>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ol>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Colors

These are the main colors used by the CDN stylesheets:

Background	#ffffff
Foreground	#4e4e4e
Primary	#286090

These are secondary colors for use in styling or customizing components:

Success	#5cb85c
Error	#d9534f
Warn	#ec971f
Info	#428bca

Layout

Grids

The grid system provided by the CDN is a 12 column grid.

.grid-column-12

.grid-column-6

.grid-column-2

.grid-column-4

.grid-column-6

.grid-column-1

.grid-column-2

.grid-column-3

.grid-column-7

.grid-column-1

.grid-column-4

.grid-column-8

.grid-column-4

<div class="grid-row text-center">
    <div class="grid-column-12">.grid-column-12</div>
</div>

<div class="grid-row">
    <div class="grid-column-6">.grid-column-6</div>
    <div class="grid-column-6">.grid-column-6</div>
</div>

<div class="grid-row">
    <div class="grid-column-2">.grid-column-2</div>
    <div class="grid-column-4">.grid-column-4</div>

    <div class="grid-column-6">.grid-column-6</div>
</div>

<div class="grid-row">
    <div class="grid-column-1">.grid-column-1</div>
    <div class="grid-column-1">.grid-column-1</div>
    <div class="grid-column-2">.grid-column-2</div>
    <div class="grid-column-2">.grid-column-2</div>

    <div class="grid-column-3">.grid-column-3</div>
    <div class="grid-column-3">.grid-column-3</div>
</div>

<div class="grid-row">
    <div class="grid-column-7">.grid-column-7</div>
    <div class="grid-column-1">.grid-column-1</div>

    <div class="grid-column-4">.grid-column-4</div>
</div>

<div class="grid-row">
    <div class="grid-column-8">.grid-column-8</div>

    <div class="grid-column-4">.grid-column-4</div>
</div>

Flow

Flow is an alternative to "float" seen in other CSS libraries. It uses flex to manage the way items flow in the layout.

Direction

Items can flow in four directions: up, down, left, and right. The flow direction specifies the order items flow in.

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

<div class="flow-up">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<div class="flow-down">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<div class="flow-left">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<div class="flow-right">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Justification and alignment

Items can be aligned and justified. Justification defines how the browser distributes space between and around the items. Alignment works the same way but in a direction perpendicular to the flow direction.

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 1

Item 2
This item is taller than the rest.

Item 3

Item 1

Item 2
This item is taller than the rest.

Item 3

Item 1

Item 2
This item is taller than the rest.

Item 3

<div class="flow-right flow-justify-center">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<div class="flow-right flow-justify-start">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<div class="flow-right flow-justify-end">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<div class="flow-right flow-align-start">
    <div>Item 1</div>
    <div>
        Item 2<br>
        This item is taller than the rest.
    </div>
    <div>Item 3</div>
</div>

<div class="flow-right flow-align-center">
    <div>Item 1</div>
    <div>
        Item 2<br>
        This item is taller than the rest.
    </div>
    <div>Item 3</div>
</div>

<div class="flow-right flow-align-end">
    <div>Item 1</div>
    <div>
        Item 2<br>
        This item is taller than the rest.
    </div>
    <div>Item 3</div>
</div>

Flow item modifiers

This item is on the left

This item is pulled to the right

This item is on the right

This item is pulled to the left

This item is sized to fit its content, as usual

This item is sized to fill all empty space

<div class="flow-right">
    <div>This item is on the left</div>
    <div class="flow-item-pull-right">This item is pulled to the right</div>
</div>
<div class="flow-left">
    <div>This item is on the right</div>
    <div class="flow-item-pull-left">This item is pulled to the left</div>
</div>
<div class="flow-right">
    <div>This item is sized to fit its content, as usual</div>
    <div class="flow-item-stretch">This item is sized to fill all empty space</div>
</div>

Buttons

<button>Default button</button>
<button class="button-primary">Primary button</button>
<button class="button-success">Success button</button>
<button class="button-warn">Warning button</button>
<button class="button-error">Error button</button>
<button class="button-link">Button that looks like a link</button>

Tables

Tables show tabular data in columns and rows.

System	Description	Accessible via
INTRANS	Expedited mainframe dispatching system and database	Terminal emulator
Carrier Portal	Portal for our third party carriers to obtain shipments with	Web browser
Back Office	Forwarding dispatching system and database	Terminal server

System

Description

Accessible via

INTRANS

Expedited mainframe dispatching system and database

Terminal emulator

Carrier Portal

Portal for our third party carriers to obtain shipments with

Web browser

Back Office

Forwarding dispatching system and database

Terminal server

System

Description

Accessible via

INTRANS

Expedited mainframe dispatching system and database

Terminal emulator

Carrier Portal

Portal for our third party carriers to obtain shipments with

Web browser

Back Office

Forwarding dispatching system and database

Terminal server

System	Description	Accessible via
INTRANS	Expedited mainframe dispatching system and database	Terminal emulator
Carrier Portal	Portal for our third party carriers to obtain shipments with	Web browser
Back Office	Forwarding dispatching system and database	Terminal server

<table>
    <thead>
        <tr>
            <th>System</th>
            <th>Description</th>
            <th>Accessible via</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>INTRANS</td>
            <td>Expedited mainframe dispatching system and database</td>
            <td>Terminal emulator</td>
        </tr>
        <tr>
            <td>Carrier Portal</td>
            <td>Portal for our third party carriers to obtain shipments with</td>
            <td>Web browser</td>
        </tr>
        <tr>
            <td>Back Office</td>
            <td>Forwarding dispatching system and database</td>
            <td>Terminal server</td>
        </tr>
    </tbody>
</table>

<table class="layout-flex">
    <thead>
        <tr>
            <th>System</th>
            <th>Description</th>
            <th>Accessible via</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>INTRANS</td>
            <td>Expedited mainframe dispatching system and database</td>
            <td>Terminal emulator</td>
        </tr>
        <tr>
            <td>Carrier Portal</td>
            <td>Portal for our third party carriers to obtain shipments with</td>
            <td>Web browser</td>
        </tr>
        <tr>
            <td>Back Office</td>
            <td>Forwarding dispatching system and database</td>
            <td>Terminal server</td>
        </tr>
    </tbody>
</table>

<table class="layout-fixed">
    <thead>
        <tr>
            <th>System</th>
            <th>Description</th>
            <th>Accessible via</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>INTRANS</td>
            <td>Expedited mainframe dispatching system and database</td>
            <td>Terminal emulator</td>
        </tr>
        <tr>
            <td>Carrier Portal</td>
            <td>Portal for our third party carriers to obtain shipments with</td>
            <td>Web browser</td>
        </tr>
        <tr>
            <td>Back Office</td>
            <td>Forwarding dispatching system and database</td>
            <td>Terminal server</td>
        </tr>
    </tbody>
</table>

<table class="no-stripes">
    <thead>
        <tr>
            <th>System</th>
            <th>Description</th>
            <th>Accessible via</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>INTRANS</td>
            <td>Expedited mainframe dispatching system and database</td>
            <td>Terminal emulator</td>
        </tr>
        <tr>
            <td>Carrier Portal</td>
            <td>Portal for our third party carriers to obtain shipments with</td>
            <td>Web browser</td>
        </tr>
        <tr>
            <td>Back Office</td>
            <td>Forwarding dispatching system and database</td>
            <td>Terminal server</td>
        </tr>
    </tbody>
</table>

Formatting Table Data

Formatting table data significantly increases the readability of data in tables.

Numerical values including currency, dates, and times should be aligned to the right inside a table cell.

Class	Description	Example
.number	Formats a numerical value	123
.money	Formats a currency value	$55

Class

Description

Example

.number

Formats a numerical value

123

.money

Formats a currency value

$55


<table class="layout-flex">
    <thead>
        <tr>
            <th>Class</th>
            <th>Description</th>
            <th>Example</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>.number</td>
            <td>Formats a numerical value</td>
            <td class="number">123</td>
        </tr>
        <tr>
            <td>.money</td>
            <td>Formats a currency value</td>
            <td class="money">$55</td>
        </tr>
    </tbody>
</table>

Form Controls

Text input

Text inputs and labels take up the width of their containers. To change their width, change the width of the container.
Labels should be tied to inputs with id's. Avoid using labels without the for attribute.

Text Input Text Area

<label for="text-input-example">Text Input</label>
<input id="text-input-example" type="text">

<label for="text-area-example">Text Area</label>
<textarea id="text-area-example"></textarea>

Dropdowns

Avoid using dropdowns for navigation.
Dropdowns should have labels.
The select2 javascript library can be used to make dropdowns with many options more manageable by adding searching and other features. Styling exists in the CDN to make select2 dropdowns look similar to native ones.

Native dropdown Select2 dropdown

<label for="native-dropdown-example">Native dropdown</label>
<select id="native-dropdown-example">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

<label for="select2-dropdown-example">Select2 dropdown</label>
<select id="select2-dropdown-example">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

<script>
    $(document).ready(function () {
        $('#select2-dropdown-example').select2({ width: '100%' });
    });
</script>

Checkboxes

Checkboxes allow users to select one or more options from a visible list.

Item 1 Item 2 Item 3 Item 4

<input id="checkbox-example1" type="checkbox">
<label for="checkbox-example1">Item 1</label>

<input id="checkbox-example2" checked type="checkbox">
<label for="checkbox-example2">Item 2</label>

<input id="checkbox-example3" disabled type="checkbox">
<label for="checkbox-example3">Item 3</label>

<input id="checkbox-example4" disabled checked type="checkbox">
<label for="checkbox-example4">Item 4</label>

Radio Buttons

Radio buttons allow users to see all available choices at once and select exactly one option.

Item 1 Item 2 Item 3 Item 4

<input id="radio-button-example1" type="radio" name="radio-button-example">
<label for="radio-button-example1">Item 1</label>

<input id="radio-button-example2" checked type="radio" name="radio-button-example">
<label for="radio-button-example2">Item 2</label>

<input id="radio-button-example3" type="radio" name="radio-button-example">
<label for="radio-button-example3">Item 3</label>

<input id="radio-button-example4" type="radio" disabled name="radio-button-example">
<label for="radio-button-example4">Item 4</label>