We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.

Container

A simple container to center your content horizontally

Concept

The Container stack can be used in any context, but mostly as a direct child of either:
  • Hero stack
  • Section stack
  • Footer stack
The containers width for each breakpoint is the result of: device - (2 * gap). The gap variable has a default value of 64px but can be modified.
This is how the container will behave:
  • on desktop it will have a maximum width of 960px
  • on widescreen it will have a maximum width of 1152px
  • on full hd it will have a maximum width of 1344px
These values can be modified.
This container is centered on desktop.
Containers Inside Other Stacks
The calculation of the container width is based on the viewport size of the device. This means that if a Container is used e.g. inside a Column stack, it will escape the boundaries.

Fluid Container

If you don't want to have a maximum width but want to keep the 32px margin on the left and right sides, check the fluid option:
This container is fluid: it will have a 64px gap on either side, on any viewport size.

Breakpoint Containers

The Breakpoint drop-down gives you two options: Widescreen and Full HD. These give you a fullwidth container until those specific breakpoints.
This container is fullwidth until the widescreen breakpoint. Notice how it ignores the right boundary if your screen is big enough.
This container is fullwidth until the full hd breakpoint. Notice how it ignores the right boundary if your screen is big enough.

Override Default Width

Sometimes you might want to override any breakpoints and give the container a specific width. This can be done by checking the Override Width option and entering a custom width in the field below.
This container is 200px wide.