In order to structure and distribute elements and components, we use grids to help us setting up different kind of layouts.

We use a 12 column layout (except on mobile) to achieve high flexibility for various layouts with different use cases. It's a commonly used system in the web.

The grid needs to be put on the page first, then the components are to be put within the grid. 

No component should be outside of a grid except videos if we need them to be full-width.

Most common layouts are: Grid(8), Grid(12), Grid(8-4) and Grid(6-6). You can find examples for these grids below.

• Examples: Grid(8), Grid(12)

• Focus towards editorial content

• Story related

• Immersive the audience, give them space to consume the content

Test content in a Grid (8) layout.

• Examples: Grid(4-8), Grid(8-4)

• Default option for content with text components and images in one line

• Used to structure content sections

• E.g. Step by step content

Test content in a Grid (8-4) layout.