iWeb Component Library

Accordion

Collapse All

Header 1

Content 1

Header 2

Content 2

Header 3

Content 3

<div data-cc-collapsible-mode="collapse-all" class="accordion js-cc-collapsible">
    <div class="is-active accordion__header">
        <h3>Header 1</h3>
    </div>
    <div class="is-active accordion__body">
        <p>Content 1</p>
    </div>
    <div class="accordion__header">
        <h3>Header 2</h3>
    </div>
    <div class="accordion__body">
        <p>Content 2</p>
    </div>
    <div class="accordion__header">
        <h3>Header 3</h3>
    </div>
    <div class="accordion__body">
        <p>Content 3</p>
    </div>
</div>

Open All

Header 1

Content 1

Header 2

Content 2

Header 3

Content 3

<div data-cc-collapsible-mode="open-all" class="accordion js-cc-collapsible">
    <div class="is-active accordion__header">
        <h3>Header 1</h3>
    </div>
    <div class="is-active accordion__body">
        <p>Content 1</p>
    </div>
    <div class="accordion__header">
        <h3>Header 2</h3>
    </div>
    <div class="accordion__body">
        <p>Content 2</p>
    </div>
    <div class="accordion__header">
        <h3>Header 3</h3>
    </div>
    <div class="accordion__body">
        <p>Content 3</p>
    </div>
</div>

Open One

Header 1

Content 1

Header 2

Content 2

Header 3

Content 3

<div class="accordion js-cc-collapsible">
    <div class="is-active accordion__header">
        <h3>Header 1</h3>
    </div>
    <div class="is-active accordion__body">
        <p>Content 1</p>
    </div>
    <div class="accordion__header">
        <h3>Header 2</h3>
    </div>
    <div class="accordion__body">
        <p>Content 2</p>
    </div>
    <div class="accordion__header">
        <h3>Header 3</h3>
    </div>
    <div class="accordion__body">
        <p>Content 3</p>
    </div>
</div>

Alert

Base

This is a default alert message.

<div class="alert">
    <p>This is a default alert message.</p>
</div>

Dismissible

This is a default alert message with a close option. Close

<div class="alert alert--dismissible" id="alert-dismissible">
    <p>This is a default alert message with a close option. <a href="#" class="close" data-cc-toggle-action="deactivate" data-cc-toggle-target="#alert-dismissible">Close</a></p>
</div>

Error

This is a error alert message.

<div class="alert alert--error">
    <p>This is a error alert message.</p>
</div>

Info

This is a warning info message.

<div class="alert alert--info">
    <p>This is a warning info message.</p>
</div>

Success

This is a success alert message.

<div class="alert alert--success">
    <p>This is a success alert message.</p>
</div>

Warning

This is a warning alert message.

<div class="alert alert--warning">
    <p>This is a warning alert message.</p>
</div>

Breadcrumb

Base

<nav class="breadcrumb">
    <ul class="nav nav--inline nav--space">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li>Company Information</li>
    </ul>
</nav>

Button

example of readme

Base

Button 
<a href="#" class="btn">Button</a>
<button type="button" class="btn">Button</button>

Block

Button Block

<p><a href="#" class="btn btn--block">Button Block</a></p>
<button type="button" class="btn btn--block">Button Block</button>

Disabled

Disabled Button 
<a href="#" class="btn btn--disabled">Disabled Button</a>
<button type="button" class="btn btn--disabled" disabled>Disabled Button</button>

Ghost

Ghost Button 
<a href="#" class="btn btn--ghost">Ghost Button</a>
<button type="button" class="btn btn--ghost">Ghost Button</button>

Size

Button sm

Button lg 

<p><a href="#" class="btn btn--sm">Button sm</a>
<button type="button" class="btn btn--sm">Button sm</button></p>

<p><a href="#" class="btn btn--lg">Button lg</a>
<button type="button" class="btn btn--lg">Button lg</button></p>

Text

Text Button 
<a href="#" class="btn btn--text">Text Button</a>
<button type="button" class="btn btn--text">Text Button</button>

Variation

btn--text:hover Button

btn--text:hover Ghost Button

btn--ghost:hover Button

btn--ghost:hover Ghost Button

btn--primary Button

btn--primary Ghost Button

btn--primary:hover Button

btn--primary:hover Ghost Button

btn--primary.btn--ghost Button

btn--primary.btn--ghost Ghost Button

btn--primary.btn--ghost:hover Button

btn--primary.btn--ghost:hover Ghost Button

btn--disabled:hover Button

btn--disabled:hover Ghost Button

btn--disabled:focus Button

btn--disabled:focus Ghost Button

btn--text:focus Button

btn--text:focus Ghost Button

btn--text:disabled Button

btn--text:disabled Ghost Button 

    <p><a href="#" class="btn btn--text:hover"> btn--text:hover Button</a>
    <button type="button" class="btn btn--text:hover"> btn--text:hover Button</button></p>
    <p><a href="#" class="btn btn--ghost btn--text:hover"> btn--text:hover Ghost Button</a>
    <button type="button" class="btn btn--ghost btn--text:hover"> btn--text:hover Ghost Button</button></p>
    <p><a href="#" class="btn btn--ghost:hover"> btn--ghost:hover Button</a>
    <button type="button" class="btn btn--ghost:hover"> btn--ghost:hover Button</button></p>
    <p><a href="#" class="btn btn--ghost btn--ghost:hover"> btn--ghost:hover Ghost Button</a>
    <button type="button" class="btn btn--ghost btn--ghost:hover"> btn--ghost:hover Ghost Button</button></p>
    <p><a href="#" class="btn btn--primary"> btn--primary Button</a>
    <button type="button" class="btn btn--primary"> btn--primary Button</button></p>
    <p><a href="#" class="btn btn--ghost btn--primary"> btn--primary Ghost Button</a>
    <button type="button" class="btn btn--ghost btn--primary"> btn--primary Ghost Button</button></p>
    <p><a href="#" class="btn btn--primary:hover"> btn--primary:hover Button</a>
    <button type="button" class="btn btn--primary:hover"> btn--primary:hover Button</button></p>
    <p><a href="#" class="btn btn--ghost btn--primary:hover"> btn--primary:hover Ghost Button</a>
    <button type="button" class="btn btn--ghost btn--primary:hover"> btn--primary:hover Ghost Button</button></p>
    <p><a href="#" class="btn btn--primary.btn--ghost"> btn--primary.btn--ghost Button</a>
    <button type="button" class="btn btn--primary.btn--ghost"> btn--primary.btn--ghost Button</button></p>
    <p><a href="#" class="btn btn--ghost btn--primary.btn--ghost"> btn--primary.btn--ghost Ghost Button</a>
    <button type="button" class="btn btn--ghost btn--primary.btn--ghost"> btn--primary.btn--ghost Ghost Button</button></p>
    <p><a href="#" class="btn btn--primary.btn--ghost:hover"> btn--primary.btn--ghost:hover Button</a>
    <button type="button" class="btn btn--primary.btn--ghost:hover"> btn--primary.btn--ghost:hover Button</button></p>
    <p><a href="#" class="btn btn--ghost btn--primary.btn--ghost:hover"> btn--primary.btn--ghost:hover Ghost Button</a>
    <button type="button" class="btn btn--ghost btn--primary.btn--ghost:hover"> btn--primary.btn--ghost:hover Ghost Button</button></p>
    <p><a href="#" class="btn btn--disabled:hover"> btn--disabled:hover Button</a>
    <button type="button" class="btn btn--disabled:hover"> btn--disabled:hover Button</button></p>
    <p><a href="#" class="btn btn--ghost btn--disabled:hover"> btn--disabled:hover Ghost Button</a>
    <button type="button" class="btn btn--ghost btn--disabled:hover"> btn--disabled:hover Ghost Button</button></p>
    <p><a href="#" class="btn btn--disabled:focus"> btn--disabled:focus Button</a>
    <button type="button" class="btn btn--disabled:focus"> btn--disabled:focus Button</button></p>
    <p><a href="#" class="btn btn--ghost btn--disabled:focus"> btn--disabled:focus Ghost Button</a>
    <button type="button" class="btn btn--ghost btn--disabled:focus"> btn--disabled:focus Ghost Button</button></p>
    <p><a href="#" class="btn btn--text:focus"> btn--text:focus Button</a>
    <button type="button" class="btn btn--text:focus"> btn--text:focus Button</button></p>
    <p><a href="#" class="btn btn--ghost btn--text:focus"> btn--text:focus Ghost Button</a>
    <button type="button" class="btn btn--ghost btn--text:focus"> btn--text:focus Ghost Button</button></p>
    <p><a href="#" class="btn btn--text:disabled"> btn--text:disabled Button</a>
    <button type="button" class="btn btn--text:disabled"> btn--text:disabled Button</button></p>
    <p><a href="#" class="btn btn--ghost btn--text:disabled"> btn--text:disabled Ghost Button</a>
    <button type="button" class="btn btn--ghost btn--text:disabled"> btn--text:disabled Ghost Button</button></p>

Card

Base

Card Header
Card image
Block Content
Card Footer 
<div class="card cc-pattern-width-sm">
    <div class="card__header">
        Card Header
    </div>
    <img src="//placehold.it/400x240" alt="Card image" class="u-img-responsive">
    <div class="card__body">
        Block Content
    </div>
    <div class="card__footer">
        Card Footer
    </div>
</div>

Card Group

Now £62.80 delivered
Was £78.50
You save £15.70

Free delivery.
Dispatched within 24 hours

<div class="card-group cc-pattern-width-sm">
    <div class="card">
        <div class="card__body">
                        <p>
                <strong class="h2 u-text-contextual-error">
                    <span class="u-visually-hidden">Now</span> &pound;62.80                </strong>
                <span class="lead"> delivered</span><br />
                Was <s>&pound;78.50</s><br />
                You save &pound;15.70<br />
            </p>
        </div>
    </div>
    <div class="card">
        <div class="card__body">
            <p><strong class="lead u-text-contextual-success">Free delivery.<br />Dispatched within 24 hours</strong></p>
        </div>
    </div>
</div>

Field Group

Base

<div class="field-group cc-pattern-width-lg">
    <label for="text" class="field-group__label">Text Input <abbr title="Required">*</abbr></label>
    <div class="field-group__field">
        <input id="text" type="text" placeholder="Text Input">
    </div>
</div>

Collapse

<div class="field-group grid g-gutter-x g-stretch-last cc-pattern-width-lg">
    <div class="field-group__field">
        <input type="checkbox" id="is_subscribed" name="is_subscribed" value="1" class="checkbox">
    </div>
    <div class="field-group__label">
        <label for="is_subscribed">Subscribe to the newsletter to receive store news and offers via email.</label>
    </div>
</div>

Radio Group

<div class="field-group">
    <label for="radio1" class="field-group__label">Choose an option</label>
    <div class="field-group__field">
        <div class="field-group">
            <label class="field-group__label">
                <input id="radio1" name="radio" type="radio" class="radio" checked="checked">
                Option 1
            </label>
        </div>
        <div class="field-group">
            <label class="field-group__label">
                <input id="radio1" name="radio" type="radio" class="radio" checked="checked">
                Option 1
            </label>
        </div>
        <div class="field-group">
            <label class="field-group__label">
                <input id="radio1" name="radio" type="radio" class="radio" checked="checked">
                Option 1
            </label>
        </div>
    </div>
</div>

Form Elements

Checkbox



<div class="checkbox field-group">
    <input id="checkbox-1" name="radio" type="checkbox" checked="checked">
    <label for="checkbox-1" class="checkbox__label">Checked</label>
</div>

<div class="checkbox field-group">
    <input id="checkbox-2" name="radio" type="checkbox">
    <label  for="checkbox-2" class="checkbox__label">Unchecked</label>
</div>

<div class="checkbox field-group">
    <input id="checkbox-3" name="radio" type="checkbox" disabled>
    <label for="checkbox-3" class="checkbox__label">Disabled</label>
</div>

<label class="checkbox field-group">
    <input id="checkbox-4" name="radio" type="checkbox">
    <span class="checkbox__label">Label wrap input</span>
</label>

File

<div class="field-group">
    <label class="field-group__label btn" for="file">Choose a file</label>
    <div class="field-group__field u-visually-hidden">
        <input type="file" name="file" id="file" />
    </div>
</div>

Radio



<div class="radio field-group">
    <input id="radio-1" name="radio" type="radio" checked>
    <label for="radio-1" class="radio__label">Checked</label>
</div>

<div class="radio field-group">
    <input id="radio-2" name="radio" type="radio">
    <label  for="radio-2" class="radio__label">Unchecked</label>
</div>

<div class="radio field-group">
    <input id="radio-3" name="radio" type="radio" disabled>
    <label for="radio-3" class="radio__label">Disabled</label>
</div>

<label class="radio field-group">
    <input id="radio-4" name="radio" type="radio">
    <span class="radio__label">Label wrap input</span>
</label>

Select

<div class="field-group cc-pattern-width-md">
    <label class="field-group__label" for="select">Browse a category...</label>
    <div class="field-group__field">
        <div class="select">
            <select id="select">
                <optgroup label="Browse a category...">
                    <option>Option One</option>
                    <option>Option Two</option>
                    <option>Option Three</option>
                </optgroup>
            </select>
        </div>
    </div>
</div>

Nav

Base

<nav>
    <ul class="nav">
        <li><a href="#">Overview</a></li>
        <li><a href="#">Credits</a></li>
        <li><a href="#">Structure</a></li>
    </ul>
</nav>

Inline Pills

<nav>
    <ul class="nav nav--inline nav--pills">
        <li><a href="#">Overview</a></li>
        <li><a href="#">Credits</a></li>
        <li><a href="#">Structure</a></li>
    </ul>
</nav>

Inline Space

<nav>
    <ul class="nav nav--inline nav--space">
        <li><a href="#">Overview</a></li>
        <li><a href="#">Credits</a></li>
        <li><a href="#">Structure</a></li><li><a href="#">Overview</a></li>
        <li><a href="#">Credits</a></li>
        <li><a href="#">Structure</a></li>    </ul>
</nav>

Inline

<nav>
    <ul class="nav nav--inline">        <li><a href="#">Overview</a></li>
        <li><a href="#">Credits</a></li>
        <li><a href="#">Structure</a></li>        <li><a href="#">Overview</a></li>
        <li><a href="#">Credits</a></li>
        <li><a href="#">Structure</a></li>    </ul>
</nav>

Multi Level

<ul class="nav nav--inline nav--space nav--multi-level">
    <li>
        <a href="#">Top Level with sub</a>
        <ul>
            <li>
                <a href="#">Sub Level with sub</a>
                <ul>
                    <li><a href="#">Sub Level</a></li><li><a href="#">Sub Level</a></li><li><a href="#">Sub Level</a></li><li><a href="#">Sub Level</a></li><li><a href="#">Sub Level</a></li><li><a href="#">Sub Level</a></li><li><a href="#">Sub Level</a></li>                </ul>
            </li>        </ul>
    </li>
    <li><a href="#">Top Level</a></li><li><a href="#">Top Level</a></li><li><a href="#">Top Level</a></li><li><a href="#">Top Level</a></li><li><a href="#">Top Level</a></li><li><a href="#">Top Level</a></li><li><a href="#">Top Level</a></li></ul>

Pills

<nav>
    <ul class="nav nav--pills">
        <li><a href="#">Overview</a></li>
        <li><a href="#">Credits</a></li>
        <li><a href="#">Structure</a></li>
    </ul>
</nav>

Space

<nav>
    <ul class="nav nav--space">
        <li><a href="#">Overview</a></li>
        <li><a href="#">Credits</a></li>
        <li><a href="#">Structure</a></li>
    </ul>
</nav>

Overlay

Drawer Left

Active left drawer

Left Drawer Panel 1

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.

Close

<p class="u-visible-cc"><a href="#" class="btn" data-cc-toggle-target="#drawer-left-1" data-cc-toggle-action="activate">Active left drawer</a></p>

<div class="drawer drawer--left" id="drawer-left" data-cc-toggle-keyboard-close="true" data-cc-toggle-target-callback="#overlay">
    <div class="drawer__dialog">

        <div id="drawer-left-1" class="u-toggle" data-cc-toggle-target="#drawer-left" data-cc-toggle-group="drawer-left-contents">
            <div class="card">
                <div class="card__header">
                    <h2>Left Drawer Panel 1</h2>
                </div>
                <div class="u-block">
                    <p>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. <i>Everyone realizes</i> why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have <b>uniform grammar</b>, pronunciation and more common words.</p>
                    <p>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. <i>Everyone realizes</i> why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have <b>uniform grammar</b>, pronunciation and more common words.</p>
                </div>
                <div class="card__footer">
                    <p><a href="#" data-cc-toggle-action="deactivate" data-cc-toggle-target="#drawer-left" class="btn">Close</a></p>
                </div>
            </div>
        </div>

    </div>
</div>

Drawer Right

Active right 1 drawer or Active right 2 drawer

Right Drawer Panel 1

Right Drawer Panel 2

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.

Close

<p class="u-visible-cc"><a href="#" class="btn" data-cc-toggle-target="#drawer-right-1" data-cc-toggle-action="activate">Active right 1 drawer</a> or <a href="#" class="btn" data-cc-toggle-target="#drawer-right-2" data-cc-toggle-action="activate">Active right 2 drawer</a></p>

<div class="drawer drawer--right" id="drawer-right" data-cc-toggle-keyboard-close="true" data-cc-toggle-target-callback="#overlay">
    <div class="drawer__dialog">

        <div id="drawer-right-1" class="u-toggle" data-cc-toggle-target="#drawer-right" data-cc-toggle-group="drawer-right-contents">
            <div class="card">
                <div class="card__header">
                    <h2>Right Drawer Panel 1</h2>
                </div>
                <div class="u-block">
                    <p><a href="#" data-cc-toggle-target="#drawer-right-2" data-cc-toggle-action="activate">Right Drawer Panel 2</a></p>
                    <p>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. <i>Everyone realizes</i> why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have <b>uniform grammar</b>, pronunciation and more common words.</p>
                    <p>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. <i>Everyone realizes</i> why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have <b>uniform grammar</b>, pronunciation and more common words.</p>
                </div>
                <div class="card__footer">
                    <p><a href="#" data-cc-toggle-action="deactivate" data-cc-toggle-target="#drawer-right" class="btn">Close</a></p>
                </div>
            </div>
        </div>

        <div id="drawer-right-2" class="u-toggle" data-cc-toggle-target="#drawer-right" data-cc-toggle-group="drawer-right-contents">
            <div class="card">
                <div class="card__header">
                    <h2>Right Drawer Panel 2</h2>
                </div>
                <div class="u-block">
                    <p><a href="#" data-cc-toggle-target="#drawer-right-1" data-cc-toggle-action="activate">Back to Right Drawer Panel 1</a></p>
                </div>
                <div class="card__footer">
                    <p><a href="#" data-cc-toggle-action="deactivate" data-cc-toggle-target="#drawer-right" class="btn">Close Drawer</a></p>
                </div>
            </div>
        </div>

    </div>
</div>

Modal

Show modal 1 content or Show modal 2 content

<p class="u-visible-cc"><a href="#" class="btn" data-cc-toggle-action="activate" data-cc-toggle-target="#modal-tab-1">Show modal 1 content</a> or <a href="#" class="btn" data-cc-toggle-action="activate" data-cc-toggle-target="#modal-tab-2">Show modal 2 content</a></p>

<div class="modal" id="modal" data-cc-toggle-keyboard-close="true" data-cc-toggle-target-callback="#overlay" data-cc-toggle-trigger-type="direct-only" data-cc-toggle-action="deactivate" data-cc-toggle-target="#modal">
    <div class="modal__dialog">

        <div id="modal-tab-1" data-cc-toggle-target="#modal"  data-cc-toggle-target-callback=".close, .js-modal-content-1" data-cc-toggle-group="modal-tabs" class="u-toggle modal-tab">
            <div class="card">
                <div class="card__header">
                    <h2>Modal Content 1</h2>
                </div>
                <div class="u-block"> <a href="https://daveredfern.com">Hello</a>
                    <p>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. <i>Everyone realizes</i> why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have <b>uniform grammar</b>, pronunciation and more common words.</p>
                    <p>Vestibulum varius sem vitae diam venenatis porttitor. <a href="http://google.com">Pellentesque</a> nec quam eget eros tincidunt mattis non ac nunc. Vivamus tristique, turpis vitae efficitur laoreet, eros tellus lobortis nulla, ac auctor neque velit at risus. Sed volutpat dolor erat, placerat malesuada quam tempor eu. Morbi a tellus sit amet lectus tincidunt imperdiet a tincidunt est. Cras vel volutpat mauris. Sed consectetur felis vel maximus elementum. Proin sed nisl lectus. Nunc non est ac ipsum gravida commodo vel quis nunc.</p>
                </div>
                <div class="card__footer">
                    <a href="#" class="close" data-cc-toggle-action="deactivate" data-cc-toggle-target="#modal">Close</a>
                </div>
            </div>
        </div>

        <div id="modal-tab-2" data-cc-toggle-target="#modal" data-cc-toggle-target-callback=".close, .js-modal-content-2" data-cc-toggle-group="modal-tabs" class="u-toggle modal-tab">
            <div class="card">
                <div class="card__header">
                    <h2>Modal Content 2</h2>
                </div>
                <div class="u-block"><a href="https://daveredfern.com">Hello</a>
                    <p>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. <i>Everyone realizes</i> why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have <b>uniform grammar</b>, pronunciation and more common words.</p>
                </div>
                <div class="card__footer">
                    <a href="#" class="close" data-cc-toggle-action="deactivate" data-cc-toggle-target="#modal">Close</a>
                </div>
            </div>

        </div>

    </div>
</div>

Overlay

Overlay is hidden by default and shows on activation of drawers or modals.

<p class="u-visible-cc">Overlay is hidden by default and shows on activation of drawers or modals.</p>

<div class="overlay" id="overlay" data-cc-toggle-action="deactivate" data-cc-toggle-target="#modal, #drawer-left, #drawer-right"></div>

Pagination

Base

<nav class="pagination">
    <ul class="pagination__pager">
        <li>
            <a href="#" aria-label="Previous" class="pagination__previous disabled"></a>
        </li>
        <li><a href="#" class="is-active">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next" class="pagination__next"></a>
        </li>
    </ul>
</nav>

Single Form

Base

<form action="" autocomplete="off" class="single-form cc-pattern-width-lg">
    <label for="search" class="u-visually-hidden">Search</label>
    <div class="grid g-stretch-first g-center-y">
        <div>
            <input type="text" id="search" placeholder="Search..." />
        </div>
        <div>
            <button type="submit" class="btn btn--red"><svg class="icon ">
            <use xlink:href="/build/img/vector/general/symbol/sprite-symbol.svg#search3" />
        </svg></button>
        </div>
    </div>
</form>

Table

Base

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 
<table class="table">
    <thead>
        <tr>
            <th>Table Heading 1</th>
            <th>Table Heading 2</th>
            <th>Table Heading 3</th>
            <th>Table Heading 4</th>
            <th>Table Heading 5</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
            <td>Table Footer 4</td>
            <td>Table Footer 5</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
    </tbody>
</table>

Bordered

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 
<table class="table table--bordered">
    <thead>
        <tr>
            <th>Table Heading 1</th>
            <th>Table Heading 2</th>
            <th>Table Heading 3</th>
            <th>Table Heading 4</th>
            <th>Table Heading 5</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
            <td>Table Footer 4</td>
            <td>Table Footer 5</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
    </tbody>
</table>

Condensed

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 
<table class="table table--condensed">
    <thead>
        <tr>
            <th>Table Heading 1</th>
            <th>Table Heading 2</th>
            <th>Table Heading 3</th>
            <th>Table Heading 4</th>
            <th>Table Heading 5</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
            <td>Table Footer 4</td>
            <td>Table Footer 5</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
    </tbody>
</table>

Responsive Table

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5 Table Heading 6 Table Heading 7 Table Heading 8 Table Heading 9 Table Heading 10
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5 Table Footer 6 Table Footer 7 Table Footer 8 Table Footer 9 Table Footer 10
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 Table Cell 6 Table Cell 7 Table Cell 8 Table Cell 9 Table Cell 10
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 Table Cell 6 Table Cell 7 Table Cell 8 Table Cell 9 Table Cell 10
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 Table Cell 6 Table Cell 7 Table Cell 8 Table Cell 9 Table Cell 10
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 Table Cell 6 Table Cell 7 Table Cell 8 Table Cell 9 Table Cell 10 
<div class="responsive-table">
    <table class="table">
        <thead>
            <tr>
                <th>Table Heading 1</th>
                <th>Table Heading 2</th>
                <th>Table Heading 3</th>
                <th>Table Heading 4</th>
                <th>Table Heading 5</th>
                <th>Table Heading 6</th>
                <th>Table Heading 7</th>
                <th>Table Heading 8</th>
                <th>Table Heading 9</th>
                <th>Table Heading 10</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer 1</td>
                <td>Table Footer 2</td>
                <td>Table Footer 3</td>
                <td>Table Footer 4</td>
                <td>Table Footer 5</td>
                <td>Table Footer 6</td>
                <td>Table Footer 7</td>
                <td>Table Footer 8</td>
                <td>Table Footer 9</td>
                <td>Table Footer 10</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
                <td>Table Cell 6</td>
                <td>Table Cell 7</td>
                <td>Table Cell 8</td>
                <td>Table Cell 9</td>
                <td>Table Cell 10</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
                <td>Table Cell 6</td>
                <td>Table Cell 7</td>
                <td>Table Cell 8</td>
                <td>Table Cell 9</td>
                <td>Table Cell 10</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
                <td>Table Cell 6</td>
                <td>Table Cell 7</td>
                <td>Table Cell 8</td>
                <td>Table Cell 9</td>
                <td>Table Cell 10</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
                <td>Table Cell 6</td>
                <td>Table Cell 7</td>
                <td>Table Cell 8</td>
                <td>Table Cell 9</td>
                <td>Table Cell 10</td>
            </tr>
        </tbody>
    </table>
</div>

Striped

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 
<table class="table table--striped">
    <thead>
        <tr>
            <th>Table Heading 1</th>
            <th>Table Heading 2</th>
            <th>Table Heading 3</th>
            <th>Table Heading 4</th>
            <th>Table Heading 5</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer 1</td>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
            <td>Table Footer 4</td>
            <td>Table Footer 5</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
        <tr>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
            <td>Table Cell 3</td>
            <td>Table Cell 4</td>
            <td>Table Cell 5</td>
        </tr>
    </tbody>
</table>

Tabs

Base

Tab 1

tab 1 content

Tab 2

tab 2 content

Tab 3

tab 3 content

<div data-cc-collapse-mode="one-open" class="tabs js-cc-collapsible">
    <div class="is-active tabs__header">
        <h3>Tab 1</h3>
    </div>
    <div class="is-active tabs__body">
        <p>tab 1 content</p>
    </div>
    <div class="tabs__header">
        <h3>Tab 2</h3>
    </div>
    <div class="tabs__body">
        <p>tab 2 content</p>
    </div>
    <div class="tabs__header">
        <h3>Tab 3</h3>
    </div>
    <div class="tabs__body">
        <p>tab 3 content</p>
    </div>
</div>

Tag

Base

Base tag 
<span class="tag">Base tag</span>

Badge

Badge 
<span class="tag tag--badge">Badge</span>

Large

large 
<span class="tag tag--lg">large</span>

Small

small 
<span class="tag tag--sm">small</span>

Title

Base

This is a Main Title

This is a Sub Title

<div class="title">
    <h1>This is a Main Title</h1>
    <h2>This is a Sub Title</h2>
</div>

Toggle Icon

Adds a plus and minus icon to the interface using the shape mixin.

Base

Toggle Me

<div class="toggle-icon cc-pattern-width-sm" data-cc-toggle-action="toggle" data-cc-toggle-target="#demo-toggle-icon-1" id="demo-toggle-icon-1-header">
    <h4>Toggle Me</h4>
    <span class="toggle-icon__icon"></span>
</div>
<div class="u-toggle" id="demo-toggle-icon-1">
    <ul class="nav nav--space">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Affiliates</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>