Spacing

Spacing for the site is done in multiples of 8px. The following spacer sizes are used between and within components:

• 96px
• 48px
• 24px
• 16px

Please note that spacing within components is responsive and will change when switching from desktop to tablet or mobile (ie. 24px padding will switch to 16px on smaller devices).

Types of spacers

Invisible

This spacer appears as a pink box during authoring, but will not be visible to users once the page is published. It is used to create space between elements on the page so the page is less cluttered and easier to read.

For invisible spacers, the typical use case is a medium spacer in between sections of content within the same column or component.

Components themselves generally don't need spacers to separate between each other due to built-in padding.

Line

This spacer is used to divide sections of content so users can easily understand which information is grouped and related.