The grid system

A responsive grid around a fluid 12 column grid

Our website is designed around a fluid 12 column grid which adapts to any screen size. This grid creates visual consistency between pages, while allowing flexibility across a wide variety of devices. Modules will stack as seen below.

Full, wide & narrow

There are different possibilities for using the grid, depending which type of page you are building.

If you are working on a frontpage, section or sub-section page, only use the wide modules as it creates visual consistency.

On article pages, only narrow modules should be used.  Break up text with relevant images, fact boxes or infographics. Wide modules should only be used in the bottom of an article page, as teasers to related content.

Choosing 50% or 100%

The grid system follows a simple, and easy to apply logic. Modules are either 100% or 50% width. A critical rule to follow is not to repeat 100% or 50% modules consecutively. For example, 50% width modules always come in pairs and should be used to break up the 100% width modules.

Having two 100% width modules only works when using different variations, such as the Horizontal teaser module and 1 column module, but never two of the same modules in succession.

Create variations with 50% width modules by adding splashes, image backgrounds and colour background modules. Identical 50% width modules should not be stacked consecutively. Two on top of each other is optimal, but there should be no more than 3 rows.