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.



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.



Element Property Value
Divider Background color ∆colorPlatformGray100


No states considerations for this component.


No theming considerations for this component.


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


No behavior considerations for this component.

Developer Docs

Vue Developer Docs

Component documentation coming soon!