Menu

Divider

Dividers are thin lines that group content in lists and layouts, or separate blocks of content.

Also known as:

Horizontal rulesHRLinesStroke

Need to know

Content dividers are used to separate content within a card, table, or any white content area.
Canvas dividers are used on the canvas (not cards) to separate large blocks of content.
Use dividers when whitespace is not enough of a separator.

Visuals

UI Kit

To keep in mind

Dividers separate content into clear groups. This helps people navigate the information hierarchy.

Content dividers are used to separate content within a card, table, or any white content area.
Canvas dividers are used on the canvas (not cards) to separate large blocks of content. For example, a canvas divider is used to define the area under the Title Block to create a single hierarchical plain at the top of the page.

We use full-bleed dividers in lists/menus and middle dividers to group or separate content.
They inherit the background color they sit on, hence the need for an opacity (alpha).

When to use and when not to use

When to use

When whitespace is not enough of a separator.
In lists, separate items to show they are individual and unrelated items when each item is long and otherwise difficult to scan.
In layouts, when background color changes (e.g. from Gray 100 to White)

When not to use

For surrounding an item, use a border.
For grouping content, use a card or table row or well.

External links

Material design: dividers