Alerts

			// Change the modifier class to modify the style
// alert-message--success || alert-message--attention || alert-message--error
// Add `color-inverse` as an optional modifier class to flip the colours
// Add role="alert" for warning/error messages

<p class="alert-message alert-message--success color-inverse">
{% render 'icon-alert' %}
	// Message Text
	<span>Success</span>
</p>
			

Success

Alerts Inverse

Success

Colours

  • --color-black

    0, 0, 0

  • --color-white

    255, 255, 255

  • --color-success

    2, 113, 0

  • --color-error

    152, 0, 0

  • --color-attention

    255, 184, 0

 
  • --color-green

    0, 106, 62

  • --color-blue

    0, 141, 213

  • --color-dark

    18, 21, 26

  • --color-dark-grey

    26, 26, 26

  • --color-grey

    144, 146, 153

  • --color-strong-line

    228, 228, 228

  • --color-light-line

    242, 243, 245

  • --color-light-background

    248, 248, 248

Typography

H1 Title Example

H2 Title Example

H3 Title Example

H4 Title Example

H5 Title Example
H6 Title Example
 

Paragraph Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum, ante sit amet volutpat dictum, diam tellus tristique mauris, sed pellentesque dolor libero at arcu.

Paragraph Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum, ante sit amet volutpat dictum, diam tellus tristique mauris, sed pellentesque dolor libero at arcu.

Paragraph Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum, ante sit amet volutpat dictum, diam tellus tristique mauris, sed pellentesque dolor libero at arcu.

Tagline Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum, ante sit amet volutpat dictum, diam tellus tristique mauris, sed pellentesque dolor libero at arcu.

Tagline Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum, ante sit amet volutpat dictum, diam tellus tristique mauris, sed pellentesque dolor libero at arcu.

Tagline Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum, ante sit amet volutpat dictum, diam tellus tristique mauris, sed pellentesque dolor libero at arcu.

Buttons

				// Change the modifier class to modify the style
// button--primary || button--secondary || button--tertiary || button--success || button--warning || button--warning
// Add `color-inverse` as an optional modifier class to flip the colours
// Add the `disabled` attribute to disable

<button class="button button--primary color-inverse"
	type="button"
>
	Shop Now
</button>
			

Primary

Disabled

Secondary

Disabled

Tertiary

Disabled

White

Disabled

Small

Disabled

Successs

Disabled

Warning

Disabled

Error

Disabled

Buttons Inverse

Primary

Disabled

Secondary

Disabled

Tertiary

Disabled

Successs

Disabled

Warning

Disabled

Error

Disabled

Static Inputs

				// Change the modifier class to modify/display any associated alert message and styles
// custom-input--error || custom-input--attention || custom-input--success

<label class="custom-input custom-input--error" for="label-1">

	// Add or remove the `visually-hidden` class to toggle text visibility

	<span class="visually-hidden">Checkbox Label</span>

	<span class="custom-input__icon">

		// Add or remove the "disabled" attribute to disable the input and apply associated styling

		<input id="label-1" name="label-1" type="checkbox">

		// Optionally render an SVG here below the input - if left empty, the default will be used

	</span>

	// Not every alert is required to be added, only what you intend to render
	// These will be completely hidden unless the appropriate modifier class has been added to the parent container

	<p class="alert-message alert-message--error color-inverse" role="alert">
		{% render 'icon-alert' %} <span>Error</span>
	</p>
	<p class="alert-message alert-message--attention" role="alert">
		{% render 'icon-alert' %} <span>Warning</span>
	</p>
	<p class="alert-message alert-message--success color-inverse">
		{% render 'icon-alert' %} <span>Success</span>
	</p>

</label>
		

Default icon

Custom icon

Error State

Success State

Warning State

 

Default icon

Custom icon

Error State

Success State

Warning State

 

Default

Disabled

Error State

Success State

Warning State

Freeform Inputs

				// Change the modifier class to modify/display any associated alert message and styles
// custom-input--error || custom-input--attention || custom-input--success

<label class="custom-input custom-input--error" for="textarea-input-1">

	// Add or remove the `visually-hidden` class to toggle text visibility

	<span class="visually-hidden">Checkbox Label</span>

	<span class="custom-input__field">

		// Add or remove the "disabled" attribute to disable the input and apply associated styling

		<textarea
			id="textarea-input-1
			name="textarea-input-1"
		></textarea>

	</span>

	// Not every alert is required to be added, only what you intend to render
	// These will be completely hidden unless the appropriate modifier class has been added to the parent container

	<p class="alert-message alert-message--error color-inverse" role="alert">
		{% render 'icon-alert' %} <span>Error</span>
	</p>
	<p class="alert-message alert-message--attention" role="alert">
		{% render 'icon-alert' %} <span>Warning</span>
	</p>
	<p class="alert-message alert-message--success color-inverse">
		{% render 'icon-alert' %} <span>Success</span>
	</p>

</label>
		

Text Input

Disabled

Error State

Success State

Warning State

 

Textarea

Disabled

Error State

Success State

Warning State

Primary

This is an inline link example.

Primary

Module link