.png)
Divider
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.
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.
States
No states considerations for this component.
Placement
No placement considerations for this component beyond what has been outlined in the previous paragraphs.
Developer Docs
Vue Developer DocsComponent documentation coming soon!