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.

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>

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

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