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.

By adding a specific classname to the layout__col element you can make an element span across a number of columns.
For example by having 3 elements that span 4 columns we can create a layout of 3 columns (3 x 4 is 12).

Or 2 elements that span 6 columns to create a layout of 2 columns (2 x 6 is 12).

An element with only layout__col — without an additional classname — expands across the leftover space.
The possibilities are endless, you can make it as complex as you want.

There are a wide range off additional predefined classnames available that controle the layout of the different elements inside a column.

You can combine them to have full controle.

To controle 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 methode rather then 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.