Skip to content

Divider

A Divider is a 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.

Ready to use

DesignDevelopAccessibility

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”
  1. 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.