A divider draws a rule between things. Three tokens set its colour, weight and spacing, and a parent can re-point any of them to tune every divider inside it. Only is a pure token re-point, though — the other three variants write their own CSS as well, which matters when an override does not reach them. Border widths and colours come from the Border page.
Tokens
| Token | Default | Sets |
|---|---|---|
| The line colour, which is what the subtle and strong variants change | ||
| The line weight. Note the strong variant does not read it — see below | ||
| The margin around the rule — above and below on a horizontal one, left and right on a vertical one |
Basic usage
Medically reviewed on 14 May 2026.
Sources and references.
<hr class="divider">
A bare <hr> is styled to match. The one difference matters inside a : the child margin reset zeroes a bare <hr>'s vertical margins, so its spacing comes from the block's gap, while keeps its own --divider-spacing. Reach for the class when a rule needs more room than the gap gives it.
Subtle and strong
Subtle — identical to the default under this theme
Heart Health
Diabetes
Strong — a major boundary
This month's newsletter
Upcoming live events
<hr class="divider divider--subtle">
<hr class="divider divider--strong">
Strong re-points --divider-color to the primary border colour and sets border-top-width directly rather than through --divider-thickness — so re-pointing that token on a parent silently does nothing to a strong divider.
Subtle is the awkward one under this brand. It re-points --divider-color to a 10 % black, which is exactly what --border-faded already resolves to in light mode — so is pixel-identical to a plain here. In dark mode the default moves to a 20 % white while subtle stays 10 % black, leaving it darker than the page and effectively invisible. It is an engine class this theme has no use for.
Vertical
<span class="divider--vertical"></span>
The rule carries align-self: stretch, so inside a flex row it takes the row's height on its own. Outside a flex context it has no height and needs one set, which is what the demo above does.
Labelled
A rule with a word in it, most often or between two alternatives. The label is real content, so this variant rides a <div> rather than an <hr>, and the lines either side are pseudo-elements drawn from the same tokens.
Subscribe to the newsletter.
Follow along on social.
<div class="divider divider--labelled">or</div>
In a tight stack whose gap already owns the rhythm, re-point the token rather than overriding the rule: set --divider-spacing on a parent and every divider inside it follows.
Accessibility
| Case | Markup |
|---|---|
| A section break a screen reader should announce | <hr class="divider"> — the element already carries the meaning |
| A purely decorative rule | <div class="divider">, or role="presentation" on the <hr> |
| A vertical rule marking a real boundary | role="separator" — the element is a <span>, so the role has to be stated |
| A labelled divider | No role. The label is meaningful text and should be read as such |
Rules
- Use the variant classes, not tokens, to pick a weight. The API is and ; there is no or , and asking for one silently does nothing.
- Re-point a token rather than overriding the rule. Setting
--divider-spacingon a parent keeps every divider inside it consistent; a one-offmarginoverride does not. - Do not draw a rule where spacing already separates. A divider between every element stops marking anything.