Layout

Overview

When to use:

• Use our layout and grid system to create consistent and organized layouts
• Use alignment and spacing consistently to maintain visual harmony

1. Margins
2. Container
3. Columns
4. Grid Gap

Breakpoints

We use these breakpoints to optimize layouts across screen sizes. Not all breakpoints need to be provided in a design handover. Breakpoints only need to be referenced when the design needs to be changed for a particular breakpoint range.

Breakpoint Tokens

Container

For each Section of our website, we use a container to group the elements contained in that section. The container also provides the inside element with a consistent and central maximum width they can span in the section. We are using a fixed container size for each breakpoint, that is larger than sm, below that we are making the container full-width and flexible relating to the user’s screen size.

Grid

In order to provide an optimal user experience across a range of screen sizes, we make use of a grid system. This system adjusts to the size of the user’s device screen and maintains consistency in the layout of screens throughout the flow. This makes it easier for users to view and understand the content. Typically, the grid is contained within a container that sets a maximum width based on the screen size breakpoint.

Grid Type

We differentiate in our system between two different grid types. Our fixed grid has predefined column widths and gutters and has a fixed container width. Our fluid grid has a width that adapts to the full width of the user’s screen, has flexible column width, and is responsive, but it still has a fixed gutter width.

Grid Presets

Our Grid offers the following presets. Using these helps us keep the layout of our pages consistent and easy to process for the user.

The naming of each preset is constructed by combining:

1. Number of columns the grid is split in (i.e. cols-2, for two columns in one row)
2. (Optional) The space each column occupies in one row, divided by 12 (i.e. span-5/7 for the first element occupying 5 columns, while the second occupies 7) If no value is given here the elements will be split evenly.
3. The responsive behavior and how many elements are in one row per breakpoint starting from largest (xl) to smallest (xs) (.i.e. [2-2-2-1-1] [xl-lg-md-sm-xs])

Using them in Figma

We offer Figma Grid styles that can be effortlessly applied to your Frame via the Layout grid item on your right sidebar. These styles can be directly applied to your screen frame, and there are five styles available for each of our five breakpoints.