Also known as:
Horizontal rulesHRLinesStroke

Divider

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

Need to know

  • We have designs but no components for dividers.

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).

An image belongs here…

Type: Middle divider (not edge to edge) Style: default

An image belongs here…

Type: Full-bleed (edge to edge) Style: high-contrast

An image belongs here…

Type: Full-bleed (edge to edge) Style: default

An image belongs here…

Type: Full-bleed (edge to edge) Style: reversed

An image belongs here…

Type: Full-bleed (edge to edge) Style: default

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