Divider

A divider is a thin line that groups content in lists and layouts. They separate content into clear groups.

When to use

Use a divider when you want to make a distinction between sections of content or where a line is necessary to denote sections of a page to better organize information on a page. Use the vertical divider to form or separate different groups, such as a group of headings in a menu. A vertical divider will automatically swap to a horizontal divider at mobile resolutions.

Alternatives and related components

Anatomy

The divider consists of:

1. Line: the separator

(Interactive) states

None.

Design properties

Color

• Line: fill color Grey/2

Structure

• Line: height 1px

Dividers are placed along the bottom edge of the content tiles, independent of the grid.

Accessibility

[technical requirements]

Content guidelines

Best practices

Divider with subheader

When using a divider with a subheader, place the divider above the subheader to reinforce the relationship between the subheader and the content.

Inset dividers

Inset dividers should:

• Be used to separate related content.
• Be used judicious to demarcate major sections of content
• Be used in conjunction with anchoring elements such as avatars

And should:

• Not used for too many elements on one page because a heavy use of dividers can lead to visual noise and dilute their impact
• Not be used if such strong divisions are not required. Consider using white space, subheaders, or inset dividers

Full-bleed dividers

Full-bleed dividers should:

• Be used to separate distinct content sections (e.g., biographic details from contact information) or distinct content elements (e.g., list items) in both lists and page layouts

And should:

• Not be overused because it creates visual noise and ultimately diminishes the meaning of the dividers

References

https://material-ui.com/components/dividers/ https://material.io/archive/guidelines/components/dividers.html