Divider

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

Also known as:
Horizontal rulesHRLinesStroke

AnchorNeed 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

Examples

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 stone to white)
When not to use

External links