---
title: "Divider"
subtitle: "A rule between sections, and the tokens that set it"
description: "The divider separates content with a rule: horizontal, vertical, subtle, strong or labelled, and the three tokens that set its colour, weight and spacing."
author: "Studio"
section: "Website"
subsection: "Foundations"
order: 13
status: "published"
---

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 `.divider--subtle` 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](/website/border.html) page.

## Tokens

| Token | Default | Sets |
| --- | --- | --- |
| `var(--divider-color)` | `var(--border-faded)` | The line colour, which is what the subtle and strong variants change |
| `var(--divider-thickness)` | `var(--border-s)` | The line weight. Note the strong variant does **not** read it — see below |
| `var(--divider-spacing)` | `var(--space-xl)` | The margin around the rule — above and below on a horizontal one, left and right on a vertical one |

## Basic usage

<div class="demo-preview is-joined">
  <p>Medically reviewed on 14 May 2026.</p>
  <hr class="divider">
  <p>Sources and references.</p>
</div>

```html
<hr class="divider">
```

A bare `<hr>` is styled to match. The one difference matters inside a `.block`: the child margin reset zeroes a bare `<hr>`'s vertical margins, so its spacing comes from the block's gap, while `.divider` keeps its own `--divider-spacing`. Reach for the class when a rule needs more room than the gap gives it.

## Subtle and strong

<div class="demo-preview is-joined">
  <div class="block gap-xl">
    <div class="block gap-m">
      <p class="demo-eyebrow">Subtle — identical to the default under this theme</p>
      <p>Heart Health</p>
      <hr class="divider divider--subtle">
      <p>Diabetes</p>
    </div>
    <div class="block gap-m">
      <p class="demo-eyebrow">Strong — a major boundary</p>
      <p>This month's newsletter</p>
      <hr class="divider divider--strong">
      <p>Upcoming live events</p>
    </div>
  </div>
</div>

```html
<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 **`.divider--subtle` is pixel-identical to a plain `.divider` 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

<div class="demo-preview is-joined">
  <div style="display: flex; align-items: center; gap: 0;">
    <span>Articles</span>
    <span class="divider--vertical" style="height: 1.5em; margin: 0 var(--space-m);"></span>
    <span>Video</span>
    <span class="divider--vertical" style="height: 1.5em; margin: 0 var(--space-m);"></span>
    <span>Live events</span>
  </div>
</div>

```html
<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.

<div class="demo-preview is-joined">
  <p>Subscribe to the newsletter.</p>
  <div class="divider divider--labelled">or</div>
  <p>Follow along on social.</p>
</div>

```html
<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 `.divider--subtle` and `.divider--strong`; there is no `var(--subtle)` or `var(--strong)`, and asking for one silently does nothing.
- **Re-point a token rather than overriding the rule.** Setting `--divider-spacing` on a parent keeps every divider inside it consistent; a one-off `margin` override does not.
- **Do not draw a rule where spacing already separates.** A divider between every element stops marking anything.