Also known as:
Horizontal rulesHRLinesStroke

Divider

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

AnchorNeed to know

  • We have designs but no components for dividers.

Visuals

UI Kit

Examples

To keep in mind

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

  • 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

  • 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 stone to white)

When not to use

External Links