Skip to main content

Divider

Overview​

Dividers can be vertical or horizontal to separate related content. Related content may either be visually separated by dividers or by white space. In general, using white space (consider 24px, 32px, or 48px to separate sections) feels cleaner and allows the design to breathe.

Image of a form using dividers to separate sections.

1. Complex content is visually separated with dividers.

Image of a form using white space to separate sections.

2. Simpler content - groups of form fields - are visually separated with white space.

Vertical dividers may also be used inside of toolbars to separate sections of icons. (Functionality to support this behavior is currently in the Forge backlog.)

Image of a vertical divider inside of a toolbar.

Components​

Dividers may be used in:

Patterns​