Consent Preferences

Layout

To adjust stylings for tablet or mobile screen only please read this first.

Spacing elements

To control white space between elements we do not add padding or margins, instead we use separate elements with a predefined size.
The reason we use this method rather than padding or margins is so we can be more consistent across the entire website.
It also gives the ability to easily change spacing rules across the entire website and it is clearer where what spacing is used.
spacing-XXL
spacing-XL
spacing-L
spacing-M
spacing-S
spacing-XS
spacing-XXS
spacing-XXXS

Page layout

The layout system consists of rows and columns, where each row is divided up into 12 columns.
The total row width is controlled by the container element that wraps it all.
container
layout__row
layout__col
layout__col
layout__col
layout__col
layout__col
layout__col
layout__col
layout__col
layout__col
layout__col
layout__col
layout__col
By adding a specific class name to the layout__col element you can make an element span across several columns.
For example by having 3 elements that span 4 columns we can create a layout of 3 columns (3 x 4 is 12).
container
layout__row
layout__col
layout__col-4
layout__col
layout__col-4
layout__col
layout__col-4
Or 2 elements that span 6 columns to create a layout of 2 columns (2 x 6 is 12).
container
layout__row
layout__col
layout__col-6
layout__col
layout__col-6
An element with only layout__col — without an additional class name — expands across the leftover space.
The possibilities are endless, you can make it as complex as you want.
container
layout__row
layout__col
layout__col-5
layout__col
layout__col
layout__col-3
layout__col
layout__col-2

Layout inside element

There is a wide range of additional predefined class names available that control the layout of the different elements inside a column.
layout__vertical
layout__align-start
default
layout__vertical
layout__align-center
layout__vertical
layout__align-end
layout__vertical
layout__justify-start
default
layout__vertical
layout__justify-center
layout__vertical
layout__justify-end
layout__vertical
layout__justify-space-between
layout__vertical
layout__justify-space-around
layout__horizontal
layout__align-start
default
layout__horizontal
layout__align-center
layout__horizontal
layout__align-end
layout__horizontal
layout__justify-start
default
layout__horizontal
layout__justify-center
layout__horizontal
layout__justify-end
layout__horizontal
layout__justify-space-between
layout__horizontal
layout__justify-space-around
You can combine them to have control over both vertical and horizontal axes.
layout__vertical
layout__align-center
layout__justify-space-between
layout__horizontal
layout__align-center
layout__justify-space-between