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.
#00bcc9
#00a4af
#e93f29
#e22e17
#f4f4f4
#d5d5d5
#737373
#191919
#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 can be generated using the mixin @include flag().
It accepts two parameters:
@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>
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>
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:
<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>
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>
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">
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>
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).
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
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);
<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 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 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].
<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>
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)
<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>
A simple loading screen overlay with animation.
<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 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'll lose any changes you'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>
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);
<div class="nwt-heading-primary">20px, Graphik Bold (default)</div>
<div class="nwt-heading-secondary">16px, Graphik Medium</div>
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>
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>
- 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.