Divider

Approved — Ready for dev

A divider is a 1px tall line that separates content between visual stops and list items. Dividers are non-essential; meaning the use of a divider needs to be intentional and meaningful. It is very easy for dividers to become noise, so if visual stops can be created using white space, this is preferred over the use of a divider.

Divider

Anatomy

There are three variations of dividers: full bleed, inline, and anchored.

Full bleed dividers

Full bleed dividers are high emphasis visual stops used to separate unrelated sections of content spanning the full width of the parent container regardless of the parent padding.

Inline dividers

Inline dividers are used as a way to provide visual breaks between related pieces of content within the same overall section — spanning the full width of the parent container while honoring the parent padding.

Anchored dividers

Anchored dividers provide visual separation between sibling list items, and should not be used outside lists. Anchored dividers are aligned to a keyline on one side, and full bleed on the other side regardless of parent padding.

Note: when using anchored dividers with sibling list items, ensure that the last child does not display a divider. Anchored dividers should only appear in-between list items — not above the first list item or below the last list item.


Specs

Color

Element Property Value
Divider Background color ∆colorPlatformGray50

States

No states considerations for this component.

Theming

No theming considerations for this component.

Placement

No placement considerations for this component beyond what has been outlined in the previous paragraphs.

Behavior

No behavior considerations for this component.

Developer Docs

Vue Developer Docs

Component documentation coming soon!