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)