Divider — Vanilla

Divider with vanilla HTML. Ensure Rizzo CSS is loaded.

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.

Add this component

The command below includes <strong>Divider</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

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)

Live example

Content above

Content below

With label

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

Live example

Vertical

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

Live example
Item 1 Item 2 Item 3

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

html 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>

Other frameworks: Astro ¡ Svelte ¡ Vue ¡ React