Divider
Visual elements used to separate and group information on a page.
Divider is a minimalistic visual component used for structuring and grouping information on a page. It subtly delineates different sections without causing distraction, thus enhancing user comprehension.
Also known as: Horizontal rule, rule, line.
Anatomy
A. Default divider: A medium-weight, neutral-colored horizontal line.
B: Section divider: A heavy-weight, colored horizontal line.
C: Decorative divider: A light-weight, neutral-colored horizontal line.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Default | To clearly distinguish between sub-sections or groups of content within a section of page. In text-heavy contexts where it can improve readability by breaking up large blocks of text. | When content grouping can be implied using white space. |
| Section | To separate two distinct sections at the page level. | In place of a default divider to separate content within a section. |
| Decorative | As an aesthetic element to enhance the look or feel of your content. | As a functional separator or when a divider is critical to understanding the organization of your content. |
Best practices
- Use whitespace when possible to group content before resorting to using dividers.
- Use dividers where they make sense. They should help in grouping related content or separating unrelated content.
- Keep the style of dividers consistent throughout your design to maintain visual harmony.
- Ensure decorative dividers meet accessibility contrast ratios. For more information, reference Accessibility.
- Ensure margins are equal widths, whether you decide to implement full-width dividers or crop them to the margins.
Do Use dividers to group content into logical groupings.
Don't Overuse dividers, which can make the page look cluttered.
Divider hierarchy
Divider styles are meant to communicate different types of content separation. The example below illustrates how you might combine divider styles to establish visual hierarchy.
