Divider

Horizontal or vertical rule

Intent

Divider draws a rule between sections -- a plain horizontal <hr class="divider">, a labeled break like <div class="divider">or</div>, or (with .as-vertical) a vertical rule for inline separation inside flex rows.

Pick divider when a visual break adds meaning beyond what whitespace alone conveys -- the "or" between two auth options, a delimiter between nav groups, a boundary between unrelated sections on a dashboard. When whitespace is enough, don't reach for a rule; spacing tokens handle rhythm without visual noise.

Basic usage

A plain <hr> with the .divider class. Semantic HTML -- assistive tech announces the break as a thematic separator.

Content above the divider.

Content below the divider.

<div class="flow">
    <p>Content above the divider.</p>
    <hr class="divider"/>
    <p>Content below the divider.</p>
</div>

Labeled

A <div class="divider"> with text content renders as a label flanked by two lines -- the common "or" pattern in authentication forms, "more" markers in timelines, or category breaks in a list. The ::before and ::after pseudo-elements are the lines; the element's own text is the label.

<div class="flow">
    <button class="button as-block" type="button">Continue with email</button>
    <div class="divider">or</div>
    <button class="button is-outlined as-block" type="button">Continue with passkey</button>
</div>

Vertical

.as-vertical turns the divider into a vertical rule for use inside a flex row -- breadcrumb-style nav groups, inline metadata separators, toolbar section breaks. The rule stretches to the row's height via align-self: stretch, so it matches whatever the flex row sizes itself to.

Home

Projects

Settings

<div class="cluster">
    <a href="#">Home</a>
    <div class="divider as-vertical"></div>
    <a href="#">Projects</a>
    <div class="divider as-vertical"></div>
    <a href="#">Settings</a>
</div>

For nav rows that want stronger separation, reach for sidebar-nav; for toolbar-style groups with button separation, reach for cluster with a gap. Vertical dividers work best when the items on either side are genuinely discontinuous.

Class reference

.divider -- the atom. Apply to <hr> for a plain horizontal rule or to <div> with text content for a labeled rule.
.as-vertical -- vertical shape for inline flex rows. Pairs with either <hr> or <div> root; typically <div> for decorative use inside a cluster.

Customization

--divider-spacing applies to the block axis by default and flips to the inline axis under .as-vertical. Full token list and defaults: src/css/divider.css.

Accessibility

<hr> is semantic. The plain horizontal divider uses an <hr> element, which announces as "horizontal rule" or "separator" in assistive tech. Use it when the break between sections carries meaning (thematic shift, topic change). Don't use <hr> for purely decorative rules -- a <div class="divider"> without a label is the decorative form.
Labeled dividers are decorative. The <div class="divider">or</div> shape is a visual device. Screen readers read "or" as plain text. If the label carries critical meaning (not just "or" in a visual auth flow, but a required section label), consider a <h3> or other semantic heading alongside or in place of the divider.
Vertical dividers don't need roles. A <div class="divider as-vertical"> with no text is purely visual -- assistive tech ignores it, which is correct. If you want the separator to be announced (rare; usually cluster gap alone conveys the grouping), add role="separator" to the <div>.

CSS Reference: Divider

Horizontal or vertical rule with optional label

Source: src/css/divider.css

Tokens

Token	Default	Description
`--divider-color`	`var(--color-border)`	Line color for the divider
`--divider-spacing`	`var(--space-md)`	Margin spacing around the divider
`--divider-label-gap`	`var(--gap-relaxed)`	Gap between the label text and the lines
`--divider-font-size`	`var(--ui-text-sm)`	Font size for the label text

Classes

Class	Description
`.divider`	component root
`.as-vertical`	Vertical orientation for use inside flex rows