mostlycss
Theme

Divider

hr.divider

Divider — a rule between sections, optionally with a word in the middle.

Examples

A rule, and a labelled one

View “A rule, and a labelled one” as
<hr class="divider" />

<div class="divider divider-labelled" role="separator" aria-label="or">
  <span class="divider-label">or</span>
</div>

<hr> is void — there is nowhere to put the word "or" — so the labelled variant is a <div> that says what it is.

The aria-label is what carries the word, because separator takes its name from the author rather than from its contents.

The label at the inline start

View “The label at the inline start” as
<div class="divider divider-labelled divider-start" role="presentation">
  <h2 class="divider-label">Delivery</h2>
</div>

<div class="divider divider-labelled divider-start" role="separator" aria-label="Then">
  <span class="divider-label">Then</span>
</div>

A centred label is right for the "or" between two sign-in buttons and wrong for a section heading with a rule running off it, which is what a grouped sidebar, a settings page and a long form all want — .divider-start is that.

Note the two roles, because they are not interchangeable. When the label is a real heading the wrapper is role="presentation": the <h2> stays in the document outline and the rule is decoration, and a separator announcing itself between every group would be a stop with nothing on the other side. When the label is the meaning — an "or", a thematic break — keep role="separator" and repeat the word in aria-label, because separator takes its name from the author and never from its contents.

Tokens 6

Level 2, declared on .divider itself. Set any of them on that selector to restyle this component without touching the skin.

Level 2 tokens declared by divider
TokenDefault
--divider-colorvar(--color-border)
--divider-label-colorvar(--color-on-surface-muted)
--divider-label-font-sizevar(--font-size-sm)
--divider-label-gapvar(--space-3)
--divider-spacingvar(--space-6)
--divider-widthvar(--border-width)

Variants and states

Variants

  • .divider-labelled
  • .divider-start
  • .divider-vertical

Inside it

  • .divider-label

State it reads

None.

Before you ship it

What you have to do 3 requirements

  1. Give the labelled divider an aria-label. separator takes its name from the author only, so the visible <span> contributes nothing: without the attribute the element announces a bare separator.
  2. Do not add role="separator" to an <hr>. The element already carries it; the attribute is redundant.
  3. Carry aria-orientation="vertical" on .divider-vertical, which is the one thing the class cannot say for itself.

src/css/components/divider.css · npx mostlycss add divider