Styleguide

3 - Molecules

3.1 - Alerts

For displaying important contextual information that needs to be noticeable.

This is an alert. get in touch

<p class="alert">This is an alert. <a href="#0">get in touch</a></p>
Source: src/molecules/_alerts.scss, line 1

3.2 - Breadcrumbs

For displaying the current page's location in the hierarchy of the site structure. The last breadcrumb should reflect the current page's title and not be a link.

<ul class="breadcrumb">
	<li>
		<a href="#0">Dashboard</a>
	</li>
	<li>
		<a href="#0">Publishers</a>
	</li>
	<li>
		Jordan & Sons
	</li>
</ul>
Source: src/molecules/_breadcrumbs.scss, line 1

3.3 - Details (collapsible)

Native HTML functionality for collapsible content

Details Something small enough to escape casual notice. 
<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
Source: src/molecules/_details.scss, line 1

3.4 - Slugs

For the display of small pieces of data such as tags for categorisation of documents or a list of features.

link slug span as slug 
<a href="#0" class="slug">link slug</a>
<button class="slug">button slug</button>
<span class="slug">span as slug</span>
Source: src/molecules/_slugs.scss, line 1

3.4.1 - Slug action

An action (button or link) inside a text only slug.

slug action as button slug action as link 
<span class="slug">
    slug action as button
    <button class="slug__action">
        <svg aria-hidden="true" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z" fill="#fff"/></svg>
    </button>
</span>
<span class="slug">
    slug action as link
    <a href="#0" class="slug__action">
        <svg aria-hidden="true" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z" fill="#fff"/></svg>
    </a>
</span>
Source: src/molecules/_slugs.scss, line 133

3.4.2 - Slug icon

An icon in a slug

link slug with icon text slug with icon 
<a href="#0" class="slug">
    <span class="slug__icon">
        <svg aria-hidden="true" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"/></svg>
    </span>
    link slug with icon
</a>
<button class="slug">
    <span class="slug__icon">
        <svg aria-hidden="true" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"/></svg>
    </span>
    button slug with icon
</button>
<span class="slug">
    <em class="slug__icon">
        <svg aria-hidden="true" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"/></svg>
    </em>
    text slug with icon
</span>
Source: src/molecules/_slugs.scss, line 189

3.4.3 - Primary Slug

For the display of the primary item in a list of slugs

primary link slug span as primary slug 
<a href="#0" class="slug slug--primary">primary link slug</a>
<button class="slug slug--primary">primary button slug</button>
<span class="slug slug--primary">span as primary slug</span>
Source: src/molecules/_slugs.scss, line 57

3.4.4 - Warning Slug

For the display of a negative piece of information

warning link slug span as warning slug 
<a href="#0" class="slug slug--warning">warning link slug</a>
<button class="slug slug--warning">warning button slug</button>
<span class="slug slug--warning">span as warning slug</span>
Source: src/molecules/_slugs.scss, line 94

3.5 - Tables

For the display of data.

Default styling

First Name Last Name Points
Jill Smith 50
Eve Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tempor erat. Morbi ac metus vitae risus posuere faucibus. Nam nec lacus et elit imperdiet lobortis non sed est. 94
Barry Pickles 23
Total: 150 2018

table-centered (Vertically centered cells)

First Name Last Name Points
Jill Smith 50
Eve Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tempor erat. Morbi ac metus vitae risus posuere faucibus. Nam nec lacus et elit imperdiet lobortis non sed est. 94
Barry Pickles 23
Total: 150 2018

table-striped (Alternating colour rows with hover state)

First Name Last Name Points
Jill Smith 50
Eve Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tempor erat. Morbi ac metus vitae risus posuere faucibus. Nam nec lacus et elit imperdiet lobortis non sed est. 94
Barry Pickles 23
Total: 150 2018

table-plain (Less borders and no background colour)

First Name Last Name Points
Jill Smith 50
Eve Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tempor erat. Morbi ac metus vitae risus posuere faucibus. Nam nec lacus et elit imperdiet lobortis non sed est. 94
Barry Pickles 23
Total: 150 2018 
<table class="[modifier class]">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tempor erat. Morbi ac metus vitae risus posuere faucibus. Nam nec lacus et elit imperdiet lobortis non sed est.</td>
            <td>94</td>
        </tr>
        <tr>
            <td>Barry</td>
            <td>Pickles</td>
            <td>23</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total: 150</td>
            <td>2018</td>
        </tr>
    </tfoot>
</table>
Source: src/molecules/_tables.scss, line 1

3.5.1 - Table cell states

For displaying info, success or warning states in table cells

Default styling

Jill Smith 50

cell-success (success state)

Jill Smith 50

cell-warning (warning state)

Jill Smith 50

cell-info (subtle highlight state)

Jill Smith 50 
<table>
    <tbody>
        <tr>
            <td>Jill</td>
            <td class="[modifier class]">Smith</td>
            <td>50</td>
        </tr>
    </tbody>
</table>
Source: src/molecules/_tables.scss, line 423

3.5.2 - Responsive Tables

please note Responsive tables require the attribute data-label on every <td> element. This attribute should contain the <th> for the column and is used to populate the table when below tablet viewport size.

First Name Last Name Points
Jill Trent 50
Barry Pickles 98
Steve Giblets 2
Total: 150 
<table class="table-responsive">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="First name">Jill</td>
            <td data-label="Last name">Trent</td>
            <td data-label="Points">50</td>
        </tr>
        <tr>
            <td data-label="First name">Barry</td>
            <td data-label="Last name">Pickles</td>
            <td data-label="Points">98</td>
        </tr>
        <tr>
            <td data-label="First name">Steve</td>
            <td data-label="Last name">Giblets</td>
            <td data-label="Points">2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total: 150</td>
        </tr>
    </tfoot>
</table>
Source: src/molecules/_tables.scss, line 216

3.5.3 - Table row modifier

For modifying individual table rows

Default styling

Jill Smith 50
Eve Jackson 94

row-success (success state)

Jill Smith 50
Eve Jackson 94

row-warning (warning state)

Jill Smith 50
Eve Jackson 94

row-info (subtle highlight state)

Jill Smith 50
Eve Jackson 94 
<table class="table">
    <tbody>
        <tr class="[modifier class]">
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </tbody>
</table>
Source: src/molecules/_tables.scss, line 339

3.6 - Toggle

Built as a visual enhancement to a checkbox, this toggle element behaves in exactly the same way as a checkbox. Requires strict markup as in the example below

Default styling

toggle--right (right aligned)

<div class="toggle [modifier class]">
    <input type="checkbox" checked id="example1[modifier class]">
    <span></span>
    <label for="example1[modifier class]">Toggle checkbox</label>
</div>
<div class="toggle [modifier class]">
    <input type="checkbox" id="example2[modifier class]">
    <span></span>
    <label for="example2[modifier class]">Another one</label>
</div>
<div class="toggle [modifier class]">
    <input type="checkbox" disabled checked id="example3[modifier class]">
    <span></span>
    <label for="example3[modifier class]">Disabled toggle checkbox</label>
</div>
<div class="toggle [modifier class]">
    <input type="checkbox" disabled id="example4[modifier class]">
    <span></span>
    <label for="example4[modifier class]">Disabled toggle checkbox (checked)</label>
</div>
Source: src/molecules/_toggle.scss, line 1