Divider — Vanilla

Divider component

A simple divider for visually separating content. Supports horizontal (default) and vertical orientation, and an optional label (e.g. "OR") in the middle for horizontal dividers.

BEM / attributes

• divider, divider--horizontal (default), divider--vertical
• divider--labeled — when showing a label; use divider__line, divider__label
• role="separator", aria-orientation="horizontal" or vertical; aria-label when labeled

Basic usage (horizontal)

With label

Use a labeled divider to show text in the middle (e.g. "OR" between two options).

Vertical

Use divider--vertical inside a flex row to separate items. The parent should have a defined height (e.g. min-height or height).

Features

• Accessible — role="separator" and aria-orientation; optional aria-label when label is set
• Horizontal — Full-width line; optional label in the center
• Vertical — Full-height line for use in flex layouts
• Theme-aware — Uses --border and --text-dim

HTML

<div class="divider divider--horizontal" role="separator" aria-orientation="horizontal">
  <span class="divider__line" aria-hidden="true"></span>
</div>

<div class="divider divider--horizontal divider--labeled" role="separator" aria-orientation="horizontal" aria-label="OR">
  <span class="divider__line" aria-hidden="true"></span>
  <span class="divider__label">OR</span>
  <span class="divider__line" aria-hidden="true"></span>
</div>

<!-- Vertical (inside flex with min-height): -->
<div style="display: flex; align-items: center; gap: var(--spacing-3); min-height: 3rem;">
  <span>Item 1</span>
  <div class="divider divider--vertical" role="separator" aria-orientation="vertical"><span class="divider__line" aria-hidden="true"></span></div>
  <span>Item 2</span>
  <div class="divider divider--vertical" role="separator" aria-orientation="vertical"><span class="divider__line" aria-hidden="true"></span></div>
  <span>Item 3</span>
</div>

Astro / Svelte: Astro · Svelte