Spacer

This component is used to give components extra space around them.

* Please note that because spacers are invisible, a border has been added for visibility in the examples above. The border adds additional padding. Actual spacers are shorter than they appear here.

Usage Criteria

This component helps to add extra space around components and text so that the page does not look cluttered and elements are easier for the user to scan.

Do's and Don'ts

• Do use spacers between components if it does not have adequate padding by default.
• Do use spacers to separate paragraphs of text within the same column when necessary.

Design Notes

Use spacers consistently throughout the website. For example, when using a medium sized invisible spacer around a specific component, do the same when that component appears again on a different page. This helps maintain consistency.

Configurable Options

This component has two different divider types: Invisible and Line. Other options for configuration include Divider Width and a choice of spacer size.

The Line divider type only has one size, whereas Invisible includes small, medium, and large sizes.

Developer Notes