Divider
A hairline. --border, 1px.
Spec
- Horizontal:
<hr>when it is a thematic break. Otherwise a decorative line witharia-hidden. - Vertical:
aria-orientation="vertical"if it is a separator role. Decorative:aria-hidden. - Color
--border. Not--fg. Not signal.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Semantic hr
Above the rule.
Below the rule.
Vertical decorative
Ingest1.4sp95
Do / Don't
| Do | Don't |
|---|---|
Keep <hr> when the break is semantic. | A div between every metric. |
Decorative lines aria-hidden. | A 4px branded bar as a divider. |
Motion
None. Instant. Dividers do not animate.
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
| — | — | — | — | — |
Accessibility
- Semantic
<hr>is announced as a separator. - Decorative lines are hidden from the tree.
- Contrast:
--borderon canvas is a UI line, not text. Don't put meaning only in the line. - These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.