2.1 Audio

This is mostly just left to the browser to render as it chooses.

<audio controls="controls">
  <a href="#0">download audio</a>
  <source src="foo.wav" type="audio/wav">
</audio>

Source: atoms/_audio.scss, line 1

Source: atoms/_buttons.scss, line 1

2.2.1 Default button

Styles applied by default to all button elements and type="button" elements. Can also be applied to other elements such as links with class button.

<button>a button element</button>
<input type="button" value="an input of type button">
<a href="#0" class="button">a link that looks like a button</a>

Disabled states on button and input elements can be set with the disabled attribute. Links, however, do not have a disabled property so you should use the class is-disabled

<button disabled>a button element</button>
<input disabled type="button" value="an input of type button">
<a href="#0" class="button is-disabled">a link that looks like a button</a>

Default styling

:hover hover state

:focus focus state

:disabled disabled state

<button class="button [modifier class]">Filter results</button>

Source: atoms/_buttons.scss, line 8

Default styling

.button--block always full width

.button--block-xs full width below the xs breakpoint

.button--block-sm full width below the sm breakpoint

<button class="button [modifier class]">Sign up</button>

Source: atoms/_buttons.scss, line 82

2.2.3 Icons in buttons

Icons can lend meaning to a button but should never be used on their own. A button should always contain text that accurately explains what will happen when the button is clicked.

<button class="button"><span class="fa fa-refresh" aria-hidden="true"></span> Refresh pdf</button>

Source: atoms/_buttons.scss, line 242

2.2.4 Large button

For a larger button. Typically used in conjunction with button--primary where there is a single call to action that needs to stand out.

<button class="button button--large button--primary">Sign up</button>

Source: atoms/_buttons.scss, line 118

Default styling

:hover hover state

:focus focus state

:disabled disabled state

<button class="button button--primary [modifier class]">Sign up</button>

Source: atoms/_buttons.scss, line 134

Default styling

:hover hover state

:focus focus state

:disabled disabled state

<button class="button button--secondary [modifier class]">More info</button>

Source: atoms/_buttons.scss, line 160

2.2.7 Warning button

For a negative and potentially damaging action such as deleting something. Please note if you're using a warning button you should also provide a confirmation step, or an undo action.

Default styling

:hover hover state

:focus focus state

:disabled disabled state

<button class="button button--warning [modifier class]">Delete</button>

Source: atoms/_buttons.scss, line 186

2.2.8 Button groups

For multiple buttons we use a .button-group which ensures when buttons wrap around each other they have a sensible margin.

<nav class="button-group">
    <button class="button">Generate pdf</button>
    <button class="button">Edit</button>
    <button class="button button--primary">Send</button>
</nav>

Source: atoms/_buttons.scss, line 216

2.3 Forms

Inputs, textareas, and selects. The atomic parts of forms.

  • All form elements should have labels. We should rarely rely on a placeholder only.
  • Placeholders should not be used by default but rather only when additional guidance or suggestions are needed.
  • HTML validation should be used by setting the most appropriate type and by using the required or pattern attributes where possible.

Source: atoms/_forms.scss, line 1

<label for="name">your name</label>

Source: atoms/_forms.scss, line 14

2.3.2 Input

Styles applied by default to the following elements:

input[type="text"]
input[type="password"]
input[type="datetime"]
input[type="datetime-local"]
input[type="date"]
input[type="month"]
input[type="time"]
input[type="week"]
input[type="number"]
input[type="email"]
input[type="url"]
input[type="search"]
input[type="tel"]
input[type="color"]

Please note that display: block; and width: 100%; are set by default so these elements always take up the full width of their containing element.

<label for="name">Name</label>
<input id="name" type="text" name="name" placeholder="placeholder">
<label for="password">Password</label>
<input id="password" type="password" name="password" placeholder="placeholder">
<input type="submit" value="default input type button">

Source: atoms/_forms.scss, line 32

2.3.3 Select

We're adding some styling to these but different browsers will ignore some or all of these styles.

Please note that display: block; and width: 100%; are set by default so these elements always take up the full width of their containing element.

<select id="option" name="option">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>
<select multiple size="6">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5</option>
    <option value="6">option 6</option>
</select>

Source: atoms/_forms.scss, line 187

2.3.4 Textarea

We set a minimum height and only allow vertical resizing

Please note that display: block; and width: 100%; are set by default so these elements always take up the full width of their containing element.

<textarea id="comment" name="comment" placeholder="default textarea"></textarea>

Source: atoms/_forms.scss, line 236

2.3.5 Radio

Styles applied by default to radio type inputs. Radio inputs always belong in a fieldset. Usually a legend would be provided to add context.

Please note that display: block; is set by default on labels related to radio inputs so they always take up the full width of their containing element. The label must be directly adjacent to the input in order for the associated styles to work.

Legend
<fieldset>
    <legend>Legend</legend>
    <input type="radio" name="radio" id="radio1" value="1">
    <label for="radio1"> radio 1</label>
    <input type="radio" name="radio" id="radio2" value="2">
    <label for="radio2"> radio 2</label>
</fieldset>

Source: atoms/_forms.scss, line 256

2.3.6 Checkbox

Styles applied by default to checkbox type inputs. Single checkboxes do not belong in a fieldset.

Please note that display: block; is set by default on labels related to checkbox inputs so they always take up the full width of their containing element. The label must be directly adjacent to the input in order for the associated styles to work.

<input type="checkbox" name="single-checkbox" id="single-checkbox">
<label for="single-checkbox">single checkbox</label>

Source: atoms/_forms.scss, line 278

Multiple checkboxes
<fieldset>
    <legend>Multiple checkboxes</legend>
    <input type="checkbox" name="checkbox1" id="checkbox1">
    <label for="checkbox1"> checkbox 1</label>
    <input type="checkbox" name="checkbox2" id="checkbox2">
    <label for="checkbox2"> checkbox 2</label>
</fieldset>

Source: atoms/_forms.scss, line 296

2.3.8 File

File inputs tend to be inconsistent across browsers so we opt to hide the native input and rely on a label styled like a button.

After choosing a file, the label will be given the .is-valid class and the text content of .file-upload-name will be updated to reflect the name of the file being uploaded via javascript.

Multiple uploads are supported by adding the multiple property to input type="file".

Upload files
<div class="file-upload button">
    <input type="file" multiple>
    <span class="file-upload-name">Upload files</span>
</div>

Source: atoms/_forms.scss, line 351

2.3.9 Field info

For further guidance on how to complete the form according to any validation it may have, or to give context on what we use the information for.

We will use this as your default delivery address for orders.

Minimum of 6 characters

<label for="name">Postcode</label>
<input type="text" id="postcode" name="postcode">
<p class="field-info">We will use this as your default delivery address for orders.</p>
<label for="password">Choose a password <span class="is-required">(required)</span></label>
<input id="password" name="password" type="password" required minlength=6>
<p class="field-info">Minimum of 6 characters</p>

Source: atoms/_forms.scss, line 430

2.3.10 Required field

Required fields have the required property on the input, the word (required) in the label and a more prominent visual appearance.

<label for="name">Label <span class="is-required">(required)</span></label>
<input type="text" id="required" name="required" required>
<label for="name">Label</label>
<input type="text" id="not-required" name="not-required">

Source: atoms/_forms.scss, line 139

<label for="name">Disabled</label>
<input type="text" id="disabled" name="disabled" disabled value="disabled field">
<label for="name">Read only</label>
<input type="text" id="readonly" name="readonly" readonly value="readonly field">

Source: atoms/_forms.scss, line 160

<label for="name">Error</label>
<input class="has-error" type="text" id="error" name="error" value="error field state">

Source: atoms/_forms.scss, line 174

2.4 Icons

We use font awesome for our icons. We use the span element. Where an icon is near some text that gives context to the icon we should hide the icon from assistive devices with aria-hidden="true".

Because font awesome icons are fonts, we can easily change their colour like any other text element.

We should avoid using an icon on it's own as it may fail to convey sufficient meaning.

Bathtime
<span class="fa fa-bath" aria-hidden="true"></span> Bathtime

Source: atoms/_icons.scss, line 1

Invoice
<span class="fa-stack fa-lg" aria-hidden="true">
  <i class="fa fa-file-o fa-stack-2x"></i>
  <i class="fa fa-gbp fa-stack-1x"></i>
</span>
<span class="sr-only">Invoice</span>

Source: atoms/_icons.scss, line 18

2.5 Images

By default images have their border removed and are set to vertically align in the middle of adjacent elements.

Source: atoms/_images.scss, line 1

2.5.1 Responsive image

An image that will stretch to it's largest possible size but no bigger than it's native pixel size. The image will also shrink when contained inside an element smaller than it's native size.

<img class="img-fluid" src="https://placeimg.com/500/300/tech/grayscale">

Source: atoms/_images.scss, line 8

Source: atoms/_lists.scss, line 1

Templates
Templates can be used to save you some repetition in the future.
Drafts
Drafts are works in progress saved so you can return to them later.
<dl>
    <dt>Templates</dt>
    <dd>Templates can be used to save you some repetition in the future.</dd>
    <dt>Drafts</dt>
    <dd>Drafts are works in progress saved so you can return to them later.</dd>
</dl>

Source: atoms/_lists.scss, line 78

Templates
Templates can be used to save you some repetition in the future.
Drafts
Drafts are works in progress saved so you can return to them later.
<dl class="list-inline">
    <dt>Templates</dt>
    <dd>Templates can be used to save you some repetition in the future.</dd>
    <dt>Drafts</dt>
    <dd>Drafts are works in progress saved so you can return to them later.</dd>
</dl>

Source: atoms/_lists.scss, line 109

<ul class="list-inline">
   <li><a href="#0">Terms and conditions</a></li>
   <li><a href="#0">Privacy policy</a></li>
   <li><a href="#0">Legal info</a></li>
</ul>

Source: atoms/_lists.scss, line 60

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>

Source: atoms/_lists.scss, line 8

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>

Source: atoms/_lists.scss, line 25

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<ul class="list-unstyled">
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>

Source: atoms/_lists.scss, line 42

Source: atoms/_typography.scss, line 1

Blockquote with optional footer.

Lee Jordan
<blockquote>
    <p>
        Blockquote with optional footer.
    </p>
    <footer>
        Lee Jordan
    </footer>
</blockquote>

Source: atoms/_typography.scss, line 173

bold text
<strong>bold text</strong>

Source: atoms/_typography.scss, line 148

An example inline code sample

<p>An example inline <code>code</code> sample</p>

Source: atoms/_typography.scss, line 92

emphasis text
<em>emphasis text</em>

Source: atoms/_typography.scss, line 161

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Source: atoms/_typography.scss, line 8

Heading with secondary text

<h2>Heading <small class="text-muted">with secondary text</small></h2>

Source: atoms/_typography.scss, line 61


<hr>

Source: atoms/_typography.scss, line 205

Lead text

<p class="lead">Lead text</p>

Source: atoms/_typography.scss, line 262

Muted text

Small muted text
<p class="text-muted">Muted text</p>
<small class="text-muted">Small muted text</small>

Source: atoms/_typography.scss, line 219

Paragraph

<p>Paragraph</p>

Source: atoms/_typography.scss, line 80

Here is some
pre-formatted text
<pre>Here is some
pre-formatted text</pre>

Source: atoms/_typography.scss, line 114

2.8.12 Small

Small text is smaller in relation to the font size of the parent element, rather than a fixed value.

small text
<small>small text</small>

Source: atoms/_typography.scss, line 134

Success text

<p class="text-success">Success text</p>

Source: atoms/_typography.scss, line 234

Warning text

<p class="text-warning">Warning text</p>

Source: atoms/_typography.scss, line 248