Components / Layout & Navigation / Separator

Separator beta

A hairline that divides without decorating. Plain, labelled, and vertical forms.

Preview

Account details

Billing address

DocsSupportCommunity

<div style="display:grid;gap:16px;max-width:430px">
  <p style="font-size:13.5px">Account details</p>
  <hr class="k-sep">
  <p style="font-size:13.5px">Billing address</p>
  <div class="k-sep-label">OR</div>
  <div style="display:flex;gap:12px;align-items:center;font-size:13px;color:var(--k-ink-2)"><span>Docs</span><span class="k-sep-v" style="height:16px"></span><span>Support</span><span class="k-sep-v" style="height:16px"></span><span>Community</span></div>
</div>

/* KATA Separator */
.k-sep{border:0;border-top:1px solid var(--k-line)}
.k-sep-label{display:flex;align-items:center;gap:12px;color:var(--k-ink-3);font-size:12px;font-family:var(--k-font)}
.k-sep-label::before,.k-sep-label::after{content:"";height:1px;background:var(--k-line);flex:1}
.k-sep-v{width:1px;align-self:stretch;background:var(--k-line);flex:none}

Usage

To separate groups, not to fill space. If everything needs a separator, the grouping is wrong. The labelled form is for alternatives (OR) and section breaks in forms.

Accessibility

Use role="separator" on the plain form when it carries meaning; purely visual separators are aria-hidden.

Pagination

Steps