Style Guide

Link List

<h4 class="link-list-header">Link List:</h4>
<ul class="link-list">
    <li><a href="#">Link Title 1</a></li>
    <li><a href="#">Link Title 2</a></li>
    <li><a href="#">Link Title 3</a></li>
    <li><a href="#">Link Title 4</a></li>
    <li><a href="#">Link Title 5</a></li>
</ul>

Link List:

One Form Buttons:

<div class="form-section-wrapper button-section-wrapper">
    <div class="row">
        <div class="col-xs-12 text-right">
            <button>Button</button>
        </div>
    </div>
</div>

Two Form Buttons:

<div class="form-section-wrapper button-section-wrapper">
    <div class="row">
        <div class="col-xs-12 text-right">
            <button class="alt">Alternate Button</button>
            <button>Button</button>
        </div>
    </div>
</div>

Generic Button:

<div class="button-wrapper">
    <button>Button</button>
</div>

Generic Button (Alternate):

<div class="button-wrapper">
    <button class="alt">Alternate Button</button>
</div>

Generic Button as Link:

<div class="button-wrapper">
    <a href="#">Link Button</a>
</div>

Link Button

Generic Button as Link (Alternate):

<div class="button-wrapper">
    <a href="#" class="alt">Alternate Link Button</a>
</div>

Alternate Link Button

Generic Table:

<div class="table-wrapper">
    <div class="mobile-only swipe">
        Swipe to view more &rarr;
    </div>
    <table class="table-styler">
        <tr>
            <th>Row Heading 1</th>
            <th>Row Heading 2</th>
            <th>Row Heading 3</th>
            <th>Row Heading 4</th>
            <th>Row Heading 5</th>
        </tr>
        <tr>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
        </tr>
        <tr>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
        </tr>
        <tr>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
        </tr>
        <tr>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
        </tr>
        <tr>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
            <td>Cell Content</td>
        </tr>
    </table>
</div>

Swipe to view more →

Row Heading 1	Row Heading 2	Row Heading 3	Row Heading 4	Row Heading 5
Cell Content	Cell Content	Cell Content	Cell Content	Cell Content
Cell Content	Cell Content	Cell Content	Cell Content	Cell Content
Cell Content	Cell Content	Cell Content	Cell Content	Cell Content
Cell Content	Cell Content	Cell Content	Cell Content	Cell Content
Cell Content	Cell Content	Cell Content	Cell Content	Cell Content

Table that stacks on mobile

<div class="table-wrapper mobile-stack-table">
    <div class="mobile-only swipe">
        Swipe to view more &rarr;
    </div>
    <table class="table-styler">
        <tr>
            <th>Row Heading 1</th>
            <th>Row Heading 2</th>
            <th>Row Heading 3</th>
            <th>Row Heading 4</th>
            <th>Row Heading 5</th>
        </tr>
        <tr>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
        </tr>
        <tr>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
        </tr>
        <tr>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
        </tr>
        <tr>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
        </tr>
        <tr>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
            <td><div class="mobile-only row-header">Row Heading 1</div>Cell Content</td>
        </tr>

    </table>
</div>

Row Heading 1	Row Heading 2	Row Heading 3	Row Heading 4	Row Heading 5
Row Heading 1 Cell Content	Row Heading 2 Cell Content	Row Heading 3 Cell Content	Row Heading 4 Cell Content	Row Heading 5 Cell Content
Row Heading 1 Cell Content	Row Heading 2 Cell Content	Row Heading 3 Cell Content	Row Heading 4 Cell Content	Row Heading 5 Cell Content
Row Heading 1 Cell Content	Row Heading 2 Cell Content	Row Heading 3 Cell Content	Row Heading 4 Cell Content	Row Heading 5 Cell Content
Row Heading 1 Cell Content	Row Heading 2 Cell Content	Row Heading 3 Cell Content	Row Heading 4 Cell Content	Row Heading 5 Cell Content
Row Heading 1 Cell Content	Row Heading 2 Cell Content	Row Heading 3 Cell Content	Row Heading 4 Cell Content	Row Heading 5 Cell Content

Table w/ <div>

<div class="table-wrapper">
    <div class="mobile-only swipe">
        Swipe to view more &rarr;
    </div>
    <div class="table table-styler">
        <div class="table-row table-headers">
            <div class="table-cell">Row Heading 1</div>
            <div class="table-cell">Row Heading 2</div>
            <div class="table-cell">Row Heading 3</div>
            <div class="table-cell">Row Heading 4</div>
            <div class="table-cell">Row Heading 5</div>
        </div>
        <div class="table-row">
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
        </div>
        <div class="table-row">
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
        </div>
        <div class="table-row">
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
        </div>
        <div class="table-row">
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
        </div>
        <div class="table-row">
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
            <div class="table-cell">Cell Content</div>
        </div>
    </div>
</div>

Swipe to view more →

Row Heading 1

Row Heading 2

Row Heading 3

Row Heading 4

Row Heading 5

Cell Content

Table w/ <div> that stacks on mobile

<div class="table-wrapper mobile-stack-table">
    <div class="table table-styler">
        <div class="table-row table-headers">
            <div class="table-cell">Row Heading 1</div>
            <div class="table-cell">Row Heading 2</div>
            <div class="table-cell">Row Heading 3</div>
            <div class="table-cell">Row Heading 4</div>
            <div class="table-cell">Row Heading 5</div>
        </div>
        <div class="table-row">
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
            <div class="table-cell">
                <div class="mobile-only row-header">Row Heading 1</div>Cell Content
            </div>
        </div>
    </div>
</div>

Row Heading 1

Row Heading 2

Row Heading 3

Row Heading 4

Row Heading 5

Row Heading 1

Cell Content

Row Heading 2

Cell Content

Row Heading 3

Cell Content

Row Heading 4

Cell Content

Row Heading 5

Cell Content

Row Heading 1

Cell Content

Row Heading 2

Cell Content

Row Heading 3

Cell Content

Row Heading 4

Cell Content

Row Heading 5

Cell Content

Row Heading 1

Cell Content

Row Heading 2

Cell Content

Row Heading 3

Cell Content

Row Heading 4

Cell Content

Row Heading 5

Cell Content

Row Heading 1

Cell Content

Row Heading 2

Cell Content

Row Heading 3

Cell Content

Row Heading 4

Cell Content

Row Heading 5

Cell Content

Row Heading 1

Cell Content

Row Heading 2

Cell Content

Row Heading 3

Cell Content

Row Heading 4

Cell Content

Row Heading 5

Cell Content