Design
A Divider is a simple visual element used to separate groups of content. It helps create structure, improve readability, and guide the user’s eye through sections of a layout. Dividers can be horizontal or vertical depending on the layout needs.
Anatomy
Section titled “Anatomy”- Line
When to use it
Section titled “When to use it”Use a Divider when:
- You need to separate sections of content within the same page or container.
- You want to create visual grouping inside cards, sidebars, lists, or forms.
- You need a subtle break between related UI elements without introducing heavy visual noise.
- You need to clarify hierarchy when headings or spacing alone are not enough.
Avoid a Divider when:
- Spacing alone is enough to create separation — generous padding or margins make the interface cleaner than adding a line.
- You want to show a change in context, navigation, or a major layout transition — use headers, subheaders, or layout components instead.
- You need to separate components with very strong contrast or visual weight — dividers may feel too subtle.
- You are trying to fix clutter — dividers shouldn’t compensate for an overcrowded layout.
Properties
Section titled “Properties”Line
The visual stroke itself. Adopts a muted, contrast, or accent fill from the surrounding scheme — never a custom colour.
Orientation
Horizontal by default (full width of its container). Switches to vertical inside toolbars, sidebars, and menus, where the line spans the container’s height instead.
Platform considerations
Section titled “Platform considerations”Desktop
Horizontal dividers stretch to the full content width. Vertical dividers fit the height of their containing row, with consistent inset spacing on each side.
Tablet
Same rules as desktop. Vertical dividers stay visible inside toolbars; in narrower content areas reach for spacing or a heading instead.
Mobile
Drop vertical dividers — horizontal ones span the full column width. Keep the visual weight light so the line doesn’t compete with stacked content.
Best practices
Section titled “Best practices”Use dividers sparingly. Structure should come from spacing and typography first; reach for a divider only when those aren’t enough.
Do
Align dividers to the surrounding grid, match the design-token weight to its scheme, and use semantic markup (<hr> for thematic breaks; role="separator" for purely visual ones).
Don't
Don’t mix multiple divider styles in the same view, don’t substitute dividers for headings, and don’t crowd them against adjacent content.
Content guidelines
Section titled “Content guidelines”Dividers are decorative — they carry no copy. If a separator needs a label, it’s a heading, not a divider. Keep dividers out of the tab order and don’t add text alternatives unless the divider communicates meaningful structure.