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