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

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

External Links

• Material design: dividers