3.1 Alerts

An alert bar for user updates. Should take up the full width of the page. Ideally we should use the icons shown in these examples for consistency. If an alert is dismissible, add the close button as shown.

<div class="alert" role="alert">
    <button type="button" class="close" data-dismiss="alert"><span class="fa fa-times" aria-hidden="true"></span><span class="sr-only">Close</span></button>
    <span class="fa fa-info-circle"></span>
    Alert message
</div>

Source: molecules/_alerts.scss, line 1

<div class="alert alert-success" role="alert">
    <button type="button" class="close" data-dismiss="alert"><span class="fa fa-times" aria-hidden="true"></span><span class="sr-only">Close</span></button>
    <span class="fa fa-check"></span>
    Success alert message
</div>

Source: molecules/_alerts.scss, line 30

<div class="alert alert-warning" role="alert">
    <button type="button" class="close" data-dismiss="alert"><span class="fa fa-times" aria-hidden="true"></span><span class="sr-only">Close</span></button>
    <span class="fa fa-warning"></span>
    Warning alert message
</div>

Source: molecules/_alerts.scss, line 48

3.2 Badges

A badge is used to give context to adjacent content. It can be seen as a way to categorise content. For example, an entity can have multiple badges that identify it as belonging to various categories.

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

Source: molecules/_badges.scss, line 1

Block badge Block badge
<span class="badge badge--block">Block badge</span>
<span class="badge badge--block">Block badge</span>

Source: molecules/_badges.scss, line 30

<span class="badge badge--negative">Negative</span>
<a href="#0" class="badge badge--negative">Negative</a>

Source: molecules/_badges.scss, line 119

<span class="badge badge--positive">Positive</span>
<a href="#0" class="badge badge--positive">Positive</a>

Source: molecules/_badges.scss, line 86

3.3 Cards

A card denotes a visually seperate section of a page. You should consider using the most semantically appropriate element such as aside or section. If in doubt, use div.

A card will always take up the full width of their containing element. By default we remove the top margin from the first element in a card and the bottom margin from the last child. This ensures consistent spacing.

Multiple Cards work best in a grid layout to ensure they are all the same height.

Source: molecules/_cards.scss, line 1

Default card example

<div class="card-body">
    <p>Default card example</p>
</div>

Source: molecules/_cards.scss, line 16

Card center

<div class="card-center">
    <p>Card center</p>
</div>

Source: molecules/_cards.scss, line 358

Card heading

Card body

<h3 class="card-heading">
    Card heading
</h3>
<div class="card-body">
    <p>Card body</p>
</div>

Source: molecules/_cards.scss, line 61

3.3.6 Card with heading image

A heading image for a card. This image will always fill the width of the card and scale above it's native size so be sure the image is large enough to avoid pixellating.

Card with heading image

<img class="card-header-img" src="https://placeimg.com/800/250/tech/grayscale">
<div class="card-body">
    <p>Card with heading image</p>
</div>

Source: molecules/_cards.scss, line 292

3.3.7 Inset card

A card variation with an inset effect. Card headings, footers, and sections are not intended to be used in inset cards. Inset cards are intended for use as control areas which contain form elements.

Inset card example

<div class="card-inset">
    <p>Inset card example</p>
</div>

Source: molecules/_cards.scss, line 134

3.3.9 Card with sections

Use multiple .card-section elements to get visible section dividers. There are optional .card-heading elements available for sections.

Card heading

Card heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae pretium neque, nec pulvinar elit. Phasellus et ipsum erat. Pellentesque ex risus, fermentum eu consectetur vitae, facilisis eget elit.

Card heading

Phasellus in porttitor magna. Pellentesque nisl diam, finibus vel suscipit quis, malesuada sit amet ante.

<h2 class="card-heading">Card heading</h2>
<div class="card-section">
    <h3 class="card-heading">Card heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae pretium neque, nec pulvinar elit. Phasellus et ipsum erat. Pellentesque ex risus, fermentum eu consectetur vitae, facilisis eget elit.</p>
</div>
<div class="card-section">
    <h3 class="card-heading">Card heading</h3>
    <p>Phasellus in porttitor magna. Pellentesque nisl diam, finibus vel suscipit quis, malesuada sit amet ante.</p>
</div>

Source: molecules/_cards.scss, line 158

Card section

Card section

Card section

Card section

Card section

<div class="card-section">
    <p>Card section</p>
</div>
<div class="card-section">
    <p>Card section</p>
</div>
<div class="card-section">
    <p>Card section</p>
</div>
<div class="card-divider"></div>
<div class="card-section">
    <p>Card section</p>
</div>
<div class="card-section">
    <p>Card section</p>
</div>

Source: molecules/_cards.scss, line 206

Card heading

  • Card section
  • Card section
  • Card section
<h2 class="card-heading">Card heading</h2>
<ul class="card-list">
    <li class="card-section">
        Card section
    </li>
    <li class="card-section">
        Card section
    </li>
    <li class="card-section">
        Card section
    </li>
</ul>

Source: molecules/_cards.scss, line 242

Default styling

Card heading

Card body

card-success success state

Card heading

Card body

card-warning warning state

Card heading

Card body

<h3 class="card-heading [modifier class]">
    Card heading
</h3>
<div class="card-body [modifier class]">
    <p>Card body</p>
</div>

Source: molecules/_cards.scss, line 429

3.4 Collapsible content

Hidden content activated by a click. The collapsible content should appear directly adjacent to the button or link that activates it. It's possible to show different content when a collapsible section is closed or open but use of these classes is optional.

Uses Bootstrap.

You clicked a button

You clicked a link

Hello

<p>
    <button class="collapsed" data-toggle="collapse" href="#collapseButtonExample" aria-expanded="false" aria-controls="collapseExample">
        Button content toggle
    </button>
</p>
<div class="collapse" id="collapseButtonExample">
    <p>You clicked a button</p>
</div>
<p>
    <a role="button" class="collapsed" data-toggle="collapse" href="#collapseLinkExample" aria-expanded="false" aria-controls="collapseExample">
        Link content toggle</a>
</p>
<div class="collapse" id="collapseLinkExample">
    <p>You clicked a link</p>
</div>
<p>
    <button class="collapsed" data-toggle="collapse" href="#collapseStateExample" aria-expanded="false" aria-controls="collapseExample">
        <span class="is-collapsed">Show content</span><span class="is-not-collapsed">Hide content</span>
    </button>
</p>
<div class="collapse" id="collapseStateExample">
    <p>Hello</p>
</div>

Source: molecules/_collapse.scss, line 1

<div class="dropdown">
    <button class="dropdown__toggle" data-toggle="dropdown">Dropdown button</button>
    <ul class="dropdown__menu" role="menu">
        <li><a href="#0">A link</a></li>
        <li><a href="#0">A link</a></li>
        <li><a href="#0">A link</a></li>
        <li class="dropdown__divider"></li>
        <li><a href="#0">A link</a></li>
        <li><a href="#0">A link</a></li>
    </ul>
</div>

Source: molecules/_dropdown.scss, line 1

3.6 Forms

An Example form. The width of a form should be set by it's container, usually in a grid.

  • All inputs have a label
  • Radio and checkbox sections are wrapped in a fieldset and have a legend
Gender
<form action="javascript:void(0);">
    <label for="email">Email <span class="is-required">(required)</span></label>
    <input id="email" type="email" name="email" required>
    <label for="password">Password <span class="is-required">(required)</span></label>
    <input id="password" type="password" name="password" required>
    <fieldset>
        <legend>Gender</legend>
        <input type="radio" name="gender" id="male" value="male">
        <label for="male">Male</label>
        <input type="radio" name="gender" id="female" value="female">
        <label for="female">Female</label>
    </fieldset>
    <label for="referer">How did you hear about us?</label>
    <select id="referer" name="referer">
        <option value="friend">From a friend</option>
        <option value="advert">Advertisement</option>
        <option value="social">Social media</option>
    </select>
    <fieldset>
        <input type="checkbox" name="updates" id="updates">
        <label for="updates">I would like to get updates via email</label>
    </fieldset>
    <input type="submit" name="submit" value="Submit">
</form>

Source: molecules/_forms.scss, line 1

3.6.1 Feature form

Above the mobile breakpoint, a feature form takes up a smaller proportion of it's parent element and is typically used when a form is the single focus of the page.

<form class="form-feature" action="javascript:void(0);">
    <label for="company">Your company name <span class="is-required">(required)</span></label>
    <input id="company" name="company" type="text" required>
    <label for="postcode">Your company postcode <span class="is-required">(required)</span></label>
    <input id="postcode" name="postcode" type="text" required>
</form>

Source: molecules/_forms.scss, line 79

Account
<form action="javascript:void(0);">
    <fieldset class="fieldset-section">
        <legend>Account</legend>
        <label for="email">Email</label>
        <input id="email" type="email" name="email">
        <label for="password">Password</label>
        <input id="password" type="password" name="password">
    </fieldset>
    <label for="referer">How did you hear about us?</label>
    <select id="referer" name="referer">
        <option value="friend">From a friend</option>
        <option value="advert">Advertisement</option>
        <option value="social">Social media</option>
    </select>
    <fieldset>
        <input type="checkbox" name="updates" id="updates">
        <label for="updates">I would like to get updates via email</label>
    </fieldset>
    <input type="submit" name="submit" value="Submit">
</form>

Source: molecules/_forms.scss, line 38

3.6.3 Inline forms

Inline forms are suitable for when the form is exceptionally brief. The best example of this is a login form.

When using an inline form, it's best to wrap Label/Input pairs in an element with the class label-input-pair to ensure the label always apears on the same line as it's input.

<form class="form-inline" action="javascript:void(0);">
    <div class="label-input-pair">
        <label for="email">Email</label>
        <input id="email" type="email" name="email">
    </div>
    <div class="label-input-pair">
        <label for="password">Password</label>
        <input id="password" type="password" name="password">
    </div>
    <input type="submit" name="submit" value="Log in">
</form>

Source: molecules/_forms.scss, line 113

3.6.4 Input/Button pair

An Input/Button pairing associates a button directly with an input. Forms with a single input and button are suitable for this treatment. The best example of this is a search form.

<form action="javascript:void(0);">
    <div class="input-button-pair">
        <input name="q" type="search" placeholder="Search"/>
        <input type="submit" value="Search">
    </div>
</form>
<form action="javascript:void(0);">
    <div class="input-button-pair">
        <input name="q" type="search" placeholder="Search"/>
        <button><span class="fa fa-search"></span><span class="sr-only">Search</span></button>
    </div>
</form>

Source: molecules/_forms.scss, line 216

GBP
GBP
<form action="javascript:void(0);">
    <div class="input-overlay-left">
        <input name="overlay-left" type="text" value="10.99"/>
        <div class="overlay">GBP</div>
    </div>
</form>
<form action="javascript:void(0);">
    <div class="input-overlay-right">
        <input name="overlay-right" type="text" value="10.99"/>
        <div class="overlay">GBP</div>
    </div>
</form>

Source: molecules/_forms.scss, line 285

3.7 Sections

Sections can be used to break up a page visually, even when within a container. Unless you want full width content, you'll want to set up the container again inside the section.

Default styling

page section content

.section--light light section

page section content

.section--feature dark section

page section content

<section class="section [modifier class]">
    <div class="container-fluid">
        <p>page section content</p>
    </div>
</span>

Source: molecules/_sections.scss, line 1

Default styling

First Name Last Name Quantity Notes Points
Jill Smith 50
Eve Jackson 94

table-condensed Less padding

First Name Last Name Quantity Notes Points
Jill Smith 50
Eve Jackson 94

table-bordered More borders

First Name Last Name Quantity Notes Points
Jill Smith 50
Eve Jackson 94

table-striped Alternating colours for rows

First Name Last Name Quantity Notes Points
Jill Smith 50
Eve Jackson 94

table-hover Hover state for rows

First Name Last Name Quantity Notes Points
Jill Smith 50
Eve Jackson 94

table-centered All cells are veritcally centered

First Name Last Name Quantity Notes Points
Jill Smith 50
Eve Jackson 94

table-fixed table size is fixed (all columns equal width)

First Name Last Name Quantity Notes Points
Jill Smith 50
Eve Jackson 94
<table class="table [modifier class]">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Quantity</th>
            <th>Notes</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>
                <input name="quantity" type="number"/>
            </td>
            <td>
                <input name="note" type="text"/>
            </td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>
                <input name="quantity" type="number"/>
            </td>
            <td>
                <input name="note" type="text"/>
            </td>
            <td>94</td>
        </tr>
    </tbody>
</table>

Source: molecules/_tables.scss, line 1

Default styling

Jill Smith 50
Eve Jackson 94

cell-info info state

Jill Smith 50
Eve Jackson 94

cell-success success state

Jill Smith 50
Eve Jackson 94

cell-warning warning state

Jill Smith 50
Eve Jackson 94
<table class="table table-bordered">
    <tbody>
        <tr>
            <td>Jill</td>
            <td class="[modifier class]">Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </tbody>
</table>

Source: molecules/_tables.scss, line 398

3.8.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 Quantity Notes Points
Jill Smith 50
Barry a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text 98
Steve Giblets 2

Total: 150 GBP

<table class="table table-fixed table-hover table-responsive">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Quantity</th>
            <th>Notes</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="First name">Jill</td>
            <td data-label="Last name">Smith</td>
            <td data-label="Quantity">
                <input name="quantity" type="number"/>
            </td>
            <td data-label="Notes">
                <input name="note" type="text"/>
            </td>
            <td data-label="Points">50</td>
        </tr>
        <tr>
            <td data-label="First name">Barry</td>
            <td data-label="Last name u houfewfwwfewfwe iuoh ho iuh iuhi i"> a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text</td>
            <td data-label="Quantity">
                <input name="quantity" type="number"/>
            </td>
            <td data-label="Notes">
                <input name="note" type="text"/>
            </td>
            <td data-label="Points">98</td>
        </tr>
        <tr>
            <td data-label="First name name name">Steve</td>
            <td data-label="Last name">Giblets</td>
            <td data-label="Quantity">
                <input name="quantity" type="number"/>
            </td>
            <td data-label="Notes">
                <input name="note" type="text"/>
            </td>
            <td data-label="Points">2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" class="text-right"><h3>Total: 150 GBP</h3></td>
        </tr>
    </tfoot>
</table>

Source: molecules/_tables.scss, line 200

Default styling

Jill Smith 50
Eve Jackson 94

row-info info state

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
<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: molecules/_tables.scss, line 346