Divider

Dividers create visual separation between content sections. They use semantic tokens for colour and thickness, and support horizontal, vertical, subtle, and strong variants.

Tokens

Token	Default	Purpose
		Line colour
		Line thickness
		Vertical margin

Basic usage

Content above the divider.

Content below the divider.

<hr class="divider">

The bare <hr> element is also styled to match by default. One exception: inside a , the child margin reset zeroes the bare <hr>'s vertical margins — spacing comes from the block's gap. keeps its own --divider-spacing there; use it when a rule needs breathing room beyond the gap.

Subtle variant

First section.

Second section with a lighter divider above.

<hr class="divider divider--subtle">

Strong variant

Important section boundary.

Next section with a heavier divider above.

<hr class="divider divider--strong">

Vertical divider

Use inside a flex row to separate inline content.

Left content Right content

<div style="display: flex; align-items: center;">
  <span>Left content</span>
  <span class="divider--vertical"></span>
  <span>Right content</span>
</div>

Labelled divider

A rule with a word in it, most often "or" between alternative actions — an email form above, social sign-in below. The label is real content, so this variant rides a <div> rather than an <hr>; the lines either side are pseudo-elements drawn from the same divider tokens.

Continue with a provider.

<div class="divider divider--labelled">or</div>

It inherits all three divider tokens; --divider-spacing still supplies the block margin. In a tight stack whose gap already owns the rhythm, re-point the token rather than overriding the rule — .login-form .divider { --divider-spacing: var(--space-2xs); } is the pattern.

Accessibility notes

Use <hr> for semantic section breaks that screen readers should announce
For purely decorative dividers, add role="presentation" or use a <div class="divider"> instead
Vertical dividers should use role="separator" when they represent meaningful boundaries
Labelled dividers take no role="separator" — the label is meaningful text and should be read as such

Do / Don't

Do:

Use dividers to separate distinct content groups
Use for minor separation within a section
Use for major section boundaries

Don't:

Don't use dividers where spacing alone provides sufficient separation
Don't use dividers between every element. They should be intentional

Use in another product

The design system installs once per product:

npm install github:bydefaultstudio/design-system-dist#semver:^4.7.0

This component's styles ship in design-system.css. No JavaScript, nothing else to include.