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 components so the page is less cluttered and easier to read.

For invisible spacers, the typical use case is a medium spacer in between components, and a large at the end of each page.

Line

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

Shadow

This spacer is used to create a visual separation of content and can be used to the author's discretion. Please do not use more than one shadow spacer per page. 

The shadow spacer works well with information that is related, usually denoting a deeper level of that information. For example:

• the Board of Directors page, where a shadow spacer is used to introduce the committees of each board member
• the L2 pages of Community Benefits, where the shadow spacer visually separates the header from the following body content