- Styleguide -

What it is

The aim of the Neptune Web Theme is to provide a framework and set of building blocks from which to style your application, allowing you to release and deploy independently, yet still maintaining a level of UI/UX consistency between different applications.

It is simultaneously a theme framework, styleguide and a component library.

You should be able to quickly style and create an application based on the defaults in the style guide, but may also extend and build your own styles depending on your needs.

The Neptune Web Theme provides a common set of CSS styles, SASS/SCSS mixins, colours, fonts and icons that can be used within your application.

Colour Swatches

Each colour has a variable name for easy reference - please use this rather than the hexcode directly.

e.g. The variable name $aqua can be used for any element attribute that requires that specific colour.

Use the swatch classname directly to create an element with the corresponding background/text colours.

Brand primary

$aqua-light: #00bcc9
$aqua: #00a4af

Reds

$poppy-light: #e93f29
$poppy: #e22e17

Greys

$mist: #f4f4f4
$steel: #d5d5d5
$slate: #737373
$charcoal: #191919

White

$paper: #fff
<div class="styleguide-swatches">
    <div class="styleguide-swatches__wrapper">
        <h3 class="styleguide-swatches__heading">Brand primary</h3>
        <div class="styleguide-swatches__box">
            <div class="nwt-swatch-aqua--light">$aqua-light: <code>#00bcc9</code></div>
            <div class="nwt-swatch-aqua">$aqua: <code>#00a4af</code></div>
        </div>
    </div>
    <div class="styleguide-swatches__wrapper">
        <h3 class="styleguide-swatches__heading">Reds</h3>
        <div class="styleguide-swatches__box">
            <div class="nwt-swatch-poppy--light">$poppy-light: <code>#e93f29</code></div>
            <div class="nwt-swatch-poppy">$poppy: <code>#e22e17</code></div>
        </div>
    </div>
    <div class="styleguide-swatches__wrapper">
        <h3 class="styleguide-swatches__heading">Greys</h3>
        <div class="styleguide-swatches__box">
            <div class="nwt-swatch-mist">$mist: <code>#f4f4f4</code></div>
            <div class="nwt-swatch-steel">$steel: <code>#d5d5d5</code></div>
            <div class="nwt-swatch-slate">$slate: <code>#737373</code></div>
            <div class="nwt-swatch-charcoal">$charcoal: <code>#191919</code></div>
        </div>
    </div>
    <div class="styleguide-swatches__wrapper">
        <h3 class="styleguide-swatches__heading">White</h3>
        <div class="styleguide-swatches__box--bw">
            <div class="nwt-swatch-foreground">$paper: <code>#fff</code></div>
        </div>
    </div>
</div>

Flags

Flags can be generated using the mixin @include flag().

It accepts two parameters:

  • The country or a locale (it will use the last two letters of the locale)
  • The aspect ratio '4x3' (default) or '1x1'.

@include flag('GB');

@include flag('en-GB', '1x1');

Austria (AT)

Germany (DE)

Denmark (DK)

Finland (FI)

France (FR)

Great Britain (GB)

Italy (IT)

Netherlands (NL)

Norway (NO)

Spain (ES)

Sweden (SE)

Switzerland (CH)

<div class="styleguide-flags">
    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-at styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-at--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">Austria (AT)</p>
        </div>
    </div>

    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-de styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-de--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">Germany (DE)</p>
        </div>
    </div>

    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-dk styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-dk--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">Denmark (DK)</p>
        </div>
    </div>

    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-fi styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-fi--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">Finland (FI)</p>
        </div>
    </div>

    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-fr styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-fr--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">France (FR)</p>
        </div>
    </div>

    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-gb styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-gb--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">Great Britain (GB)</p>
        </div>
    </div>

    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-it styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-it--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">Italy (IT)</p>
        </div>
    </div>

    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-nl styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-nl--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">Netherlands (NL)</p>
        </div>
    </div>

    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-no styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-no--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">Norway (NO)</p>
        </div>
    </div>

    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-es styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-es--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">Spain (ES)</p>
        </div>
    </div>

    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-se styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-se--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">Sweden (SE)</p>
        </div>
    </div>

    <div class="styleguide-flags__wrapper">
        <div class="styleguide-flags__flag">
            <span class="nwt-flag-ch styleguide-flags__flag-container" aria-hidden="true"> </span>
            <span class="nwt-flag-ch--square styleguide-flags__flag-container" aria-hidden="true"></span>
            <p class="styleguide-flags__name">Switzerland (CH)</p>
        </div>
    </div>
</div>

Form Elements/Buttons

Button styles can be generated using one of 2 mixins: @include button() or @include button-secondary().

<div>
    <button class="nwt-button-primary">Primary Button</button>
    <button class="nwt-button-primary" disabled>Primary Button Disabled</button>
</div>
<div>
    <button class="nwt-button-secondary">Secondary Button</button>
    <button class="nwt-button-secondary" disabled>Secondary Button</button>
</div>
<div>
    <input type="button" class="nwt-button-primary" value="Input Button">
    <input type="button" class="nwt-button-primary" value="Input Button Disabled" disabled>
</div>

Form Elements/Grouped

You can use a single class to provide the default styling for a group of label, input and error elements.

Example of use without and with error message:

Ooops, validation error! 
<div class="nwt-form-field">
    <label for="forename" class="nwt-label">Forename</label>
    <input name="forename" type="text" placeholder="e.g. Fred" class="nwt-input" value="">
</div>

<div class="nwt-form-field">
    <label for="forename" class="nwt-label">Forename</label>
    <input name="forename" type="text" placeholder="e.g. Fred" class="nwt-input nwt-input-error" value="Fred">
    <span class="nwt-field-error">Ooops, validation error!</span>
</div>

Form Elements/Inputs

Input styles can be generated using the mixin @include input().

It accepts 1 optional parameter, the type (textarea).

e.g.

@include input();

For a textarea

@include input($type: textarea);

<input type="text" class="nwt-input" placeholder="Input text">

<select class="nwt-input">
    <option value="1">Select option 1</option>
    <option value="2">Select option 2</option>
</select>

<span class="nwt-input-arrow">
    <select class="nwt-input">
        <option value="1">Select option 1</option>
        <option value="2">Select option 2</option>
    </select>
</span>

<textarea class="nwt-input-textarea" placeholder="Text area"></textarea>

Form Elements/Labels

Label styles can be generated using the mixin @include label().

e.g.

@include label();

<label class="nwt-label" for="input-label-example">Label for input element</label>
<input type="text" class="nwt-input" id="input-label-example" placeholder="Input text">

Form Elements/Radio & Checkbox

Radio and checkbox's use custom styles within Light.

This mixin/styles require the example html structure to work correctly. Native controls are automatically hidden, and mock inputs are shown in their place. Labels wrapping elements click the native inputs and style the mock inputs accordingly.

Internal elements have to end with class names ending with -input and -icon to be styled correctly.

<div>
    <label for="checkbox1" class="nwt-checkbox">
        <input class="nwt-checkbox-input" type="checkbox" id="checkbox1" name="example1" value="example" checked>
        <span class="nwt-checkbox-icon"></span>
        Active checkbox
    </label>
</div>
<div>
    <label for="checkbox2" class="nwt-checkbox">
        <input class="nwt-checkbox-input" type="checkbox" id="checkbox2" name="example2" value="example">
        <span class="nwt-checkbox-icon"></span>
        Inactive checkbox
    </label>
</div>
<div>
    <label for="checkbox3" class="nwt-checkbox">
        <input class="nwt-checkbox-input" type="checkbox" id="checkbox3" name="example3" value="example" checked disabled>
        <span class="nwt-checkbox-icon"></span>
        Active checkbox (disabled)
    </label>
</div>
<div>
    <label for="checkbox4" class="nwt-checkbox">
        <input class="nwt-checkbox-input" type="checkbox" id="checkbox4" name="example4" value="example" disabled>
        <span class="nwt-checkbox-icon"></span>
        Inactive checkbox (disabled)
    </label>
</div>
<div>
    <label for="radio1" class="nwt-radio">
        <input class="nwt-radio-input" type="radio" id="radio1" name="radio" value="example" checked>
        <span class="nwt-radio-icon"></span>
        Active radio
    </label>
</div>
<div>
    <label for="radio2" class="nwt-radio">
        <input class="nwt-radio-input" type="radio" id="radio2" name="radio" value="example2">
        <span class="nwt-radio-icon"></span>
        Inactive radio
    </label>
</div>
<div>
    <label for="radio3" class="nwt-radio">
        <input class="nwt-radio-input" type="radio" id="radio3" name="radio3" value="example" checked disabled>
        <span class="nwt-radio-icon"></span>
        Active radio (disabled)
    </label>
</div>
<div>
    <label for="radio4" class="nwt-radio">
        <input class="nwt-radio-input" type="radio" id="radio4" name="radio" value="example" disabled>
        <span class="nwt-radio-icon"></span>
        Inactive radio (disabled)
    </label>
</div>

Grid Layout

We use a 12 fluid column grid with fixed-width gutters generated using Susy library.

You can use all the Susy library mixins as usual, but we DO NOT use Susy gutters as we want fixed-width gutters (see below).

Grid Columns

To create a full-width 12 column grid container use the following helper mixins:

These accept 2 optional parameters, the axis in which the gutters are applied, and the style of gutter (defaults shown).

@include page-grid($axis: both, $style: padding); // typically for page layout or content e.g. page, article or section layout

@include nested-grid($axis: both, $style: padding); // typically for nested content/modules

You can use the default grid() mixin directly, with an optional map of the grid type, axis, and style (defaults shown).

@include grid($gutters: (type: page, axis: both, style: padding);

To create a column on any grid (where n is the number of columns to span) use:

@include span(n); // this is from the Susy library

Grid Gutters

To create gutters use the following helper mixins:

These accept 2 optional parameters, the axis in which the gutters are applied and the style (defaults shown).

@include page-gutters($axis: both, $style: padding);

@include nested-gutters($axis: both, $style: padding);

You can use the default gutters() mixin directly, with 3 optional parameters for the grid type, axis, and style (defaults shown).

@include gutters($type: page, $axis: both, $style: padding);

Block A
Block B
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
2 col
3 col
4 col
Block C
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
5 col
6 col
1 col
Block D
2 col
2 col
2 col
2 col
2 col
2 col
Block E
3 col
3 col
3 col
3 col
Block F
4 col
4 col
4 col
Block G
6 col
6 col
Block H
2 col
2 col
2 col
2 col
2 col
2 col
Block I
3 col
3 col
3 col
3 col
Block J
4 col
4 col
4 col
Block K
6 col
6 col
Block L
4 col
4 col
4 col
Block M
6 col
6 col
Block N
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
Block O
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
<article class="styleguide-grid">
    <div class="styleguide-block__a">
        <div class="styleguide-block">Block A</div>
    </div>
    <div class="styleguide-block__b">
        <div class="styleguide-block">Block B
            <div class="styleguide-block__module">
                <div class="styleguide-block__module-row">
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                </div>
                <div class="styleguide-block__module-row">
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                    <div class="styleguide-block__module-col-3"><span class="styleguide-block__module-block">3 col</span></div>
                    <div class="styleguide-block__module-col-4"><span class="styleguide-block__module-block">4 col</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="styleguide-block__c">
        <div class="styleguide-block">Block C
            <div class="styleguide-block__module">
                <div class="styleguide-block__module-row">
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                </div>
                <div class="styleguide-block__module-row">
                    <div class="styleguide-block__module-col-5"><span class="styleguide-block__module-block">5 col</span></div>
                    <div class="styleguide-block__module-col-6"><span class="styleguide-block__module-block">6 col</span></div>
                    <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                </div>       
            </div>
        </div>
    </div>
    <div class="styleguide-grid__row">
        <div class="styleguide-block__d">
            <div class="styleguide-block">Block D            
                <div class="styleguide-block__module">
                    <div class="styleguide-block__module-row">
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="styleguide-block__e">
            <div class="styleguide-block">Block E
                <div class="styleguide-block__module">
                    <div class="styleguide-block__module-row">
                        <div class="styleguide-block__module-col-3"><span class="styleguide-block__module-block">3 col</span></div>
                        <div class="styleguide-block__module-col-3"><span class="styleguide-block__module-block">3 col</span></div>
                        <div class="styleguide-block__module-col-3"><span class="styleguide-block__module-block">3 col</span></div>
                        <div class="styleguide-block__module-col-3"><span class="styleguide-block__module-block">3 col</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="styleguide-block__f">
            <div class="styleguide-block">Block F
                <div class="styleguide-block__module-wrapper">
                    <div class="styleguide-block__module">
                        <div class="styleguide-block__module-row">
                            <div class="styleguide-block__module-col-4"><span class="styleguide-block__module-block">4 col</span></div>
                            <div class="styleguide-block__module-col-4"><span class="styleguide-block__module-block">4 col</span></div>
                            <div class="styleguide-block__module-col-4"><span class="styleguide-block__module-block">4 col</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="styleguide-block__g">
            <div class="styleguide-block">Block G
                <div class="styleguide-block__module">
                    <div class="styleguide-block__module-row">
                        <div class="styleguide-block__module-col-6"><span class="styleguide-block__module-block">6 col</span></div>
                        <div class="styleguide-block__module-col-6"><span class="styleguide-block__module-block">6 col</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="styleguide-grid__row">
        <div class="styleguide-block__h">
            <div class="styleguide-block">Block H          
                <div class="styleguide-block__module">
                    <div class="styleguide-block__module-row">
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                        <div class="styleguide-block__module-col-2"><span class="styleguide-block__module-block">2 col</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="styleguide-block__i">
            <div class="styleguide-block">Block I
                <div class="styleguide-block__module">
                    <div class="styleguide-block__module-row">
                        <div class="styleguide-block__module-col-3"><span class="styleguide-block__module-block">3 col</span></div>
                        <div class="styleguide-block__module-col-3"><span class="styleguide-block__module-block">3 col</span></div>
                        <div class="styleguide-block__module-col-3"><span class="styleguide-block__module-block">3 col</span></div>
                        <div class="styleguide-block__module-col-3"><span class="styleguide-block__module-block">3 col</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="styleguide-block__j">
            <div class="styleguide-block">Block J
                <div class="styleguide-block__module">
                    <div class="styleguide-block__module-row">
                        <div class="styleguide-block__module-col-4"><span class="styleguide-block__module-block">4 col</span></div>
                        <div class="styleguide-block__module-col-4"><span class="styleguide-block__module-block">4 col</span></div>
                        <div class="styleguide-block__module-col-4"><span class="styleguide-block__module-block">4 col</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="styleguide-block__k">
            <div class="styleguide-block">Block K
                <div class="styleguide-block__module">
                    <div class="styleguide-block__module-row">
                        <div class="styleguide-block__module-col-6"><span class="styleguide-block__module-block">6 col</span></div>
                        <div class="styleguide-block__module-col-6"><span class="styleguide-block__module-block">6 col</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="styleguide-block__l">
            <div class="styleguide-block">Block L
                <div class="styleguide-block__module">
                    <div class="styleguide-block__module-row">
                        <div class="styleguide-block__module-col-4"><span class="styleguide-block__module-block">4 col</span></div>
                        <div class="styleguide-block__module-col-4"><span class="styleguide-block__module-block">4 col</span></div>
                        <div class="styleguide-block__module-col-4"><span class="styleguide-block__module-block">4 col</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="styleguide-block__m">
            <div class="styleguide-block">Block M
                <div class="styleguide-block__module">
                    <div class="styleguide-block__module-row">
                        <div class="styleguide-block__module-col-6"><span class="styleguide-block__module-block">6 col</span></div>
                        <div class="styleguide-block__module-col-6"><span class="styleguide-block__module-block">6 col</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="styleguide-grid__row">
        <div class="styleguide-block__n">
            <div class="styleguide-block">Block N
                <div class="styleguide-block__module">
                        <div class="styleguide-block__module-row">
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="styleguide-block__o">
            <div class="styleguide-block">Block O
                <div class="styleguide-block__module">
                        <div class="styleguide-block__module-row">
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                        <div class="styleguide-block__module-col-1"><span class="styleguide-block__module-block">1 col</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

Horizontal Rules

Horizontal rules can be generated using the mixin @include hr().

It accepts 1 optional parameter for the colour of the horizontal rule.

e.g.

@include hr();

@include hr($colour: $aqua);

<hr class="nwt-hr-primary">
<hr class="nwt-hr-secondary">

Icons

Icons can be generated using the mixin @include icon().

It accepts 1 parameter, the icon name.

e.g.

@include icon(account);

Icon classnames are derived from combining the icon-name with the prefix .nwt-icon-[icon-name].

account

add

arrow-down

arrow-left

arrow-right

arrow-up

calendar

checkmark

close

comment

deposit

double-tag

download

error

facebook

filter

google-app-store

google-plus

hamburger

hide

info

instagram

ios-app-store

knife-fork

mail

map

marker

menu

noshow

people

phone

pinterest

provisional

reconfirmed

search

settings

share

show

star

star-half

star-none

tag

target

time

twitter

youtube

today

print

newtab

<div class="styleguide-icons">
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
            <span class="nwt-icon-account" aria-hidden="true"></span>
            <p class="styleguide-icons__name">account</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-add" aria-hidden="true"></span>
        <p class="styleguide-icons__name">add</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-arrow-down" aria-hidden="true"></span>
        <p class="styleguide-icons__name">arrow-down</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-arrow-left" aria-hidden="true"></span>
        <p class="styleguide-icons__name">arrow-left</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-arrow-right" aria-hidden="true"></span>
        <p class="styleguide-icons__name">arrow-right</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-arrow-up" aria-hidden="true"></span>
        <p class="styleguide-icons__name">arrow-up</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-calendar" aria-hidden="true"></span>
        <p class="styleguide-icons__name">calendar</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-checkmark" aria-hidden="true"></span>
        <p class="styleguide-icons__name">checkmark</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-close" aria-hidden="true"></span>
        <p class="styleguide-icons__name">close</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-comment" aria-hidden="true"></span>
        <p class="styleguide-icons__name">comment</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-deposit" aria-hidden="true"></span>
        <p class="styleguide-icons__name">deposit</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-double-tag" aria-hidden="true"></span>
        <p class="styleguide-icons__name">double-tag</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-download" aria-hidden="true"></span>
        <p class="styleguide-icons__name">download</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-error" aria-hidden="true"></span>
        <p class="styleguide-icons__name">error</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-facebook" aria-hidden="true"></span>
        <p class="styleguide-icons__name">facebook</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-filter" aria-hidden="true"></span>
        <p class="styleguide-icons__name">filter</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-google-app-store" aria-hidden="true"></span>
        <p class="styleguide-icons__name">google-app-store</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-google-plus" aria-hidden="true"></span>
        <p class="styleguide-icons__name">google-plus</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-hamburger" aria-hidden="true"></span>
        <p class="styleguide-icons__name">hamburger</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-hide" aria-hidden="true"></span>
        <p class="styleguide-icons__name">hide</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-info" aria-hidden="true"></span>
        <p class="styleguide-icons__name">info</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-instagram" aria-hidden="true"></span>
        <p class="styleguide-icons__name">instagram</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-ios-app-store" aria-hidden="true"></span>
        <p class="styleguide-icons__name">ios-app-store</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-knife-fork" aria-hidden="true"></span>
        <p class="styleguide-icons__name">knife-fork</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-mail" aria-hidden="true"></span>
        <p class="styleguide-icons__name">mail</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-map" aria-hidden="true"></span>
        <p class="styleguide-icons__name">map</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-marker" aria-hidden="true"></span>
        <p class="styleguide-icons__name">marker</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-menu" aria-hidden="true"></span>
        <p class="styleguide-icons__name">menu</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-noshow" aria-hidden="true"></span>
        <p class="styleguide-icons__name">noshow</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-people" aria-hidden="true"></span>
        <p class="styleguide-icons__name">people</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-phone" aria-hidden="true"></span>
        <p class="styleguide-icons__name">phone</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-pinterest" aria-hidden="true"></span>
        <p class="styleguide-icons__name">pinterest</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-provisional" aria-hidden="true"></span>
        <p class="styleguide-icons__name">provisional</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-reconfirmed" aria-hidden="true"></span>
        <p class="styleguide-icons__name">reconfirmed</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-search" aria-hidden="true"></span>
        <p class="styleguide-icons__name">search</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-settings" aria-hidden="true"></span>
        <p class="styleguide-icons__name">settings</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-share" aria-hidden="true"></span>
        <p class="styleguide-icons__name">share</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-show" aria-hidden="true"></span>
        <p class="styleguide-icons__name">show</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-star" aria-hidden="true"></span>
        <p class="styleguide-icons__name">star</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-star-half" aria-hidden="true"></span>
        <p class="styleguide-icons__name">star-half</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-star-none" aria-hidden="true"></span>
        <p class="styleguide-icons__name">star-none</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-tag" aria-hidden="true"></span>
        <p class="styleguide-icons__name">tag</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-target" aria-hidden="true"></span>
        <p class="styleguide-icons__name">target</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-time" aria-hidden="true"></span>
        <p class="styleguide-icons__name">time</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-twitter" aria-hidden="true"></span>
        <p class="styleguide-icons__name">twitter</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-youtube" aria-hidden="true"></span>
        <p class="styleguide-icons__name">youtube</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-today" aria-hidden="true"></span>
        <p class="styleguide-icons__name">today</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-print" aria-hidden="true"></span>
        <p class="styleguide-icons__name">print</p>
        </div>
    </div>
    <div class="styleguide-icons__wrapper">
        <div class="styleguide-icons__icon">
        <span class="nwt-icon-newtab" aria-hidden="true"></span>
        <p class="styleguide-icons__name">newtab</p>
        </div>
    </div>
</div>

Links

Link styles can be generated using the mixin @include link().

It accepts 3 optional parameters, the text colours for normal, hover and active states.

e.g.

The default terracotta link

@include link();

Specific colours

@include link($colour: $aqua, $hover: $aqua-light, $active: $aqua)

primary primary (hover) primary (active)
secondary secondary (hover) secondary (active) 
<a class="nwt-link-primary" href="#">primary</a>
<a class="nwt-link-primary hover">primary (hover)</a>
<a class="nwt-link-primary active">primary (active)</a>
<br>
<a class="nwt-link-secondary" href="#">secondary</a>
<a class="nwt-link-secondary hover">secondary (hover)</a>
<a class="nwt-link-secondary active">secondary (active)</a>

Loading Screen

A simple loading screen overlay with animation.

Loading... 
<div class="nwt-loading-screen">
    <div class="nwt-loading-screen__message"><span class="nwt-loading-screen__animation">
            <svg viewbox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g stroke-width="7" stroke-linecap="round">
                    <line class="nwt-loading-bars-1" x1="10" x2="10" y2="44" y1="20"/>
                    <line class="nwt-loading-bars-2" x1="24" x2="24" y2="44" y1="20"/>
                    <line class="nwt-loading-bars-3" x1="38" x2="38" y2="44" y1="20"/>
                    <line class="nwt-loading-bars-4" x1="52" x2="52" y2="44" y1="20"/>
                </g>
            </svg>
        </span><span class="nwt-loading-screen__text">Loading...</span>
    </div>
</div>

Modal

Modal styles are based on our dependancy for Bootstrap modal (currently using Angular and react implementations).

This mixin relies on the fact that key class names are used, see example html below.

@include modal().

<div class="modal">
    <div class="modal-backdrop">
        <div role="dialog" tabindex="-1" class="fade in modal" style="display: block;">
            <div class="modal-dialog">
                <div class="modal-content" role="document">
                    <div data-e2e="confirm-modal">
                        <div class="modal-header">
                            <button class="modal-close-button"></button>
                        </div>
                        <div class="modal-body">
                            <h3 class="modal-title">Discard changes?</h3>
                            <p class="modal-message">You&apos;ll lose any changes you&apos;ve made.</p>
                        </div>
                        <div class="modal-footer">
                            <button class="modal-cancel-button" type="button" data-e2e="cancel-button">Cancel</button>
                            <button class="modal-ok-button" type="button" data-e2e="ok-button">OK</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Text/Headings

Heading styles can be generated using the mixin @include heading().

It accepts 2 optional parameters, the size (in pixels) and the weight (medium).

e.g.

@include heading();

@include heading($size: 16px, $weight: medium);

20px, Graphik Bold (default)
16px, Graphik Medium
<div class="nwt-heading-primary">20px, Graphik Bold (default)</div>
<div class="nwt-heading-secondary">16px, Graphik Medium</div>

Text/Paragraphs

Text styles can be generated using the mixin @include text().

It accepts 2 optional parameters, the size (in pixels) and the weight (medium).

e.g.

@include text();

@include text($size: 14px, $weight: medium);

@include text($size: 12px);

14px, Graphik regular (default)

14px, Graphik medium

12px, Graphik regular

12px, Graphik medium

<p class="nwt-text-primary">14px, Graphik regular (default)</p>
<p class="nwt-text-primary--em">14px, Graphik medium</p>
<p class="nwt-text-secondary">12px, Graphik regular</p>
<p class="nwt-text-secondary--em">12px, Graphik medium</p>

Unauthenticated Header

This is a common component used by SSO and Registation applications. This mixin relies on the fact that key class names are used, see example html below.

@include unauthenticated-header().

<header>
    <nav class="nwt-header">
        <div class="nwt-header__bar nwt-header__bar--branded">
            <div class="nwt-header__nested-grid">
                <a href="/" class="nwt-header__logo-link" title="Bookatable Login">
                    <img class="nwt-header__logo" src="https://assets-neptune.bookatable.com/img/bookatable-by-thefork-logo-black" width="112" height="31" alt="Bookatable by TheFork">
                </a>
            </div>
        </div>
    </nav>
</header>