Separator

hc-separator is a thin divider line. Apply .hc-separator to a native <hr> — the element already carries the implicit role="separator" and aria-orientation="horizontal" semantics, so this only swaps the browser’s default rule for a single hairline drawn from a token. Pure CSS, no JavaScript.

Horizontal

The default. A full-width hairline with margin above and below.

Account settings

Billing

<hr class="hc-separator">

Vertical

Set data-orientation="vertical" for an inline divider — for example between items in a horizontal toolbar or link row. The line stretches to the height of its flex row.

There is no HTML element for a vertical separator, and a plain <hr> reports aria-orientation="horizontal", so add aria-orientation="vertical" to keep the semantics correct.

Profile

Settings

Log out

<nav style="display:flex;align-items:center;gap:.5rem;">
  <a href="/profile">Profile</a>
  <hr class="hc-separator" data-orientation="vertical" aria-orientation="vertical">
  <a href="/settings">Settings</a>
  <hr class="hc-separator" data-orientation="vertical" aria-orientation="vertical">
  <a href="/logout">Log out</a>
</nav>

The vertical variant relies on align-self: stretch, so its parent should be a flex row (the row’s height sets the line’s length). A min-block-size fallback keeps it visible outside a stretch context.

Inside an hc-toolbar, a bare <hr> needs no class at all — the toolbar styles it itself.

Label

For an “or” divider (auth options, alternative flows), put a .hc-separator__label inside — hairlines grow around a muted, centred label. <hr> cannot contain text, so this form is a container with an explicit role="separator" (horizontal only):

<div class="hc-separator" role="separator" aria-orientation="horizontal">
  <span class="hc-separator__label">or</span>
</div>

The label text is announced as part of the page content; keep it short (“or”, “and”). If the divider should be purely decorative, use the plain <hr> form instead.

Accessibility

A separator between content sections is meaningful structure, not decoration — <hr> exposes it to screen readers via the implicit separator role, which most reading cursors announce.
For a vertical separator, always add aria-orientation="vertical"; the default for the role is horizontal.
If a divider is purely visual and the surrounding structure already conveys the grouping, you can hide it with role="none" / aria-hidden="true" so it is not announced twice. Most page-section rules should keep the default semantics.

Theming tokens

Component tokens (in component.tokens.json):

Token path	Purpose
`separator.color`	Line color (defaults to the border token).
`separator.size`	Line thickness (`1px`).
`separator.spacing`	Margin — block for horizontal, inline for vertical.
`separator.label-gap`	Gap between the label and the line segments.
`separator.label-fg`	Label color (muted text).
`separator.label-font-size`	Label font size.

CSS variables

Show the generated CSS variables

--hc-separator-color | -size | -spacing
--hc-separator-label-gap | -label-fg | -label-font-size

Toolbar — uses vertical separators to group its action clusters.
Card — a horizontal separator pairs well between a card header and its body.