Dividers

Dividers

Dividers separate content into distinct sections. They can be horizontal or vertical, with optional labels.

Horizontal Divider

A simple horizontal line to separate content blocks.

Content above the divider. This could be any block of text or components.

Content below the divider. Notice the clean visual separation.

<div class="Layout-stack">
<p>Content above the divider. This could be any block of text or components.</p>
<hr class="Divider">
<p>Content below the divider. Notice the clean visual separation.</p>
</div>
<hr class="Divider">

With Label

Add a centered label to provide context.

First section content goes here.

Or continue with

Second section content goes here.

<div class="Layout-stack">
<p>First section content goes here.</p>
<div class="Divider Divider--label">
<span>Or continue with</span>
</div>
<p>Second section content goes here.</p>
</div>
<div class="Divider Divider--label">
    <span>Or continue with</span>
</div>

Label Positions

Left
Section
Center (default)
Section
Right
Section 
<div class="Layout-stack Layout-stack--loose">
<div>
<small style="color: var(--fg-3); display: block; margin-bottom: var(--space-2);">Left</small>
<div class="Divider Divider--label Divider--label-left">
<span>Section</span>
</div>
</div>
<div>
<small style="color: var(--fg-3); display: block; margin-bottom: var(--space-2);">Center (default)</small>
<div class="Divider Divider--label">
<span>Section</span>
</div>
</div>
<div>
<small style="color: var(--fg-3); display: block; margin-bottom: var(--space-2);">Right</small>
<div class="Divider Divider--label Divider--label-right">
<span>Section</span>
</div>
</div>
</div>
<div class="Divider Divider--label Divider--label-left">...</div>
<div class="Divider Divider--label">...</div>
<div class="Divider Divider--label Divider--label-right">...</div>

Vertical Divider

Separate inline or flex items horizontally.

Home Products About Contact 
<div style="display: flex; align-items: center; gap: var(--space-4);">
<span>Home</span>
<span class="Divider Divider--vertical"></span>
<span>Products</span>
<span class="Divider Divider--vertical"></span>
<span>About</span>
<span class="Divider Divider--vertical"></span>
<span>Contact</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-4);">
    <span>Home</span>
    <span class="Divider Divider--vertical"></span>
    <span>Products</span>
</div>

Spacing Variants

Control the margin around dividers.

Tight spacing below:

Default spacing below:

Loose spacing below:

End of content.

<div style="background: var(--bg-s); padding: var(--space-4); border-radius: var(--r-m);">
<p>Tight spacing below:</p>
<hr class="Divider Divider--tight">
<p>Default spacing below:</p>
<hr class="Divider">
<p>Loose spacing below:</p>
<hr class="Divider Divider--loose">
<p>End of content.</p>
</div>
<hr class="Divider Divider--tight">  <!-- 8px margin -->
<hr class="Divider">                  <!-- 16px margin -->
<hr class="Divider Divider--loose">  <!-- 32px margin -->

Style Variants

Solid (default)
Dashed
Dotted 
<div class="Layout-stack Layout-stack--loose">
<div>
<small style="color: var(--fg-3); display: block; margin-bottom: var(--space-2);">Solid (default)</small>
<hr class="Divider">
</div>
<div>
<small style="color: var(--fg-3); display: block; margin-bottom: var(--space-2);">Dashed</small>
<hr class="Divider Divider--dashed">
</div>
<div>
<small style="color: var(--fg-3); display: block; margin-bottom: var(--space-2);">Dotted</small>
<hr class="Divider Divider--dotted">
</div>
</div>
<hr class="Divider">              <!-- Solid -->
<hr class="Divider Divider--dashed">
<hr class="Divider Divider--dotted">

In Context

Card Sections

Order Summary
Review your items
Subtotal $99.00
Shipping $5.00
Tax $8.32
Total $112.32 
<div class="Card" style="max-width: 320px;">
<div class="Card-body">
<div class="Card-title">Order Summary</div>
<div class="Card-description">Review your items</div>
</div>
<hr class="Divider" style="margin: 0;">
<div style="padding: var(--space-4);">
<div class="Layout-split" style="margin-bottom: var(--space-2);">
<span>Subtotal</span>
<span>$99.00</span>
</div>
<div class="Layout-split" style="margin-bottom: var(--space-2);">
<span>Shipping</span>
<span>$5.00</span>
</div>
<div class="Layout-split" style="color: var(--fg-3);">
<span>Tax</span>
<span>$8.32</span>
</div>
</div>
<hr class="Divider" style="margin: 0;">
<div style="padding: var(--space-4);">
<div class="Layout-split" style="font-weight: 600;">
<span>Total</span>
<span>$112.32</span>
</div>
</div>
</div>
<div style="width: 200px; background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r-m); padding: var(--space-1) 0;">
<a href="#" style="display: block; padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--fg);">Profile</a>
<a href="#" style="display: block; padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--fg);">Settings</a>
<a href="#" style="display: block; padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--fg);">Billing</a>
<hr class="Divider Divider--tight" style="margin-left: var(--space-3); margin-right: var(--space-3);">
<a href="#" style="display: block; padding: var(--space-2) var(--space-3); text-decoration: none; color: oklch(55% 0.2 25);">Sign Out</a>
</div>

Login Form

or 
<div style="max-width: 320px;">
<div class="Layout-stack Layout-stack--tight" style="margin-bottom: var(--space-4);">
<button class="Button" style="width: 100%;">
<i class="ph ph-google-logo"></i>
Continue with Google
</button>
<button class="Button" style="width: 100%;">
<i class="ph ph-apple-logo"></i>
Continue with Apple
</button>
</div>
<div class="Divider Divider--label">
<span>or</span>
</div>
<div class="Layout-stack Layout-stack--tight" style="margin-top: var(--space-4);">
<input type="email" class="Input" placeholder="Email">
<input type="password" class="Input" placeholder="Password">
<button class="Button Button--primary" style="width: 100%;">Sign In</button>
</div>
</div>

Common Patterns

Section Divider in a Settings Page

Account

Manage your account settings

Notifications

Configure alert preferences

Privacy

Control data sharing

<div style="max-width: 400px;">
<div style="padding: var(--space-3) 0;">
<h4 style="margin: 0;">Account</h4>
<p style="color: var(--fg-3); font-size: 0.85rem;">Manage your account settings</p>
</div>
<hr class="Divider">
<div style="padding: var(--space-3) 0;">
<h4 style="margin: 0;">Notifications</h4>
<p style="color: var(--fg-3); font-size: 0.85rem;">Configure alert preferences</p>
</div>
<hr class="Divider">
<div style="padding: var(--space-3) 0;">
<h4 style="margin: 0;">Privacy</h4>
<p style="color: var(--fg-3); font-size: 0.85rem;">Control data sharing</p>
</div>
</div>

Toolbar Separator

<div style="display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--bd); border-radius: var(--r-s); width: fit-content;">
<button class="Button Button--ghost Button--icon Button--small"><i class="ph ph-text-b"></i></button>
<button class="Button Button--ghost Button--icon Button--small"><i class="ph ph-text-italic"></i></button>
<button class="Button Button--ghost Button--icon Button--small"><i class="ph ph-text-underline"></i></button>
<span class="Divider Divider--vertical"></span>
<button class="Button Button--ghost Button--icon Button--small"><i class="ph ph-list-bullets"></i></button>
<button class="Button Button--ghost Button--icon Button--small"><i class="ph ph-list-numbers"></i></button>
<span class="Divider Divider--vertical"></span>
<button class="Button Button--ghost Button--icon Button--small"><i class="ph ph-link"></i></button>
</div>
© 2026 Acme Corp 
<div style="max-width: 500px;">
<hr class="Divider Divider--loose">
<div style="display: flex; justify-content: space-between; color: var(--fg-3); font-size: 0.85rem;">
<span>© 2026 Acme Corp</span>
<div style="display: flex; gap: var(--space-3);">
<a href="#" style="color: var(--fg-3);">Privacy</a>
<span class="Divider Divider--vertical"></span>
<a href="#" style="color: var(--fg-3);">Terms</a>
<span class="Divider Divider--vertical"></span>
<a href="#" style="color: var(--fg-3);">Contact</a>
</div>
</div>
</div>

Customization

Override divider styles using CSS custom properties:

/* Custom divider color */
.Divider--accent {
  border-top-color: var(--accent);
}

/* Thicker divider */
.Divider--thick {
  border-top-width: 3px;
}

/* Gradient divider */
.Divider--gradient {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--bd), transparent);
}

/* Custom label styling */
.Divider--label-fancy span {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  color: var(--accent);
}

Spacing Overrides

/* Custom vertical divider height */
.Divider--vertical-tall {
  height: 2em;
}

/* Inset divider (indented) */
.Divider--inset {
  margin-left: var(--space-8);
}

API Reference

Classes

ClassDescription
.DividerBase horizontal divider
.Divider--tightReduced margin (8px)
.Divider--looseIncreased margin (32px)
.Divider--dashedDashed line style
.Divider--dottedDotted line style
.Divider--verticalVertical separator (inline)
.Divider--labelDivider with centered text
.Divider--label-leftLabel aligned left
.Divider--label-rightLabel aligned right

Elements

ElementDescription
<hr>Semantic horizontal divider
<div>Use for labeled dividers (contains <span>)
<span>Vertical dividers and label text

Attributes

AttributeDescription
role="presentation"For decorative dividers
role="separator"For semantic labeled dividers
aria-hidden="true"Alternative for decorative dividers

CSS Reference

/* Base horizontal divider */
.Divider {
  border: none;
  border-top: 1px solid var(--bd);
  margin: var(--space-4) 0;
}

/* Spacing variants */
.Divider--tight { margin: var(--space-2) 0; }
.Divider--loose { margin: var(--space-8) 0; }

/* Style variants */
.Divider--dashed { border-top-style: dashed; }
.Divider--dotted { border-top-style: dotted; }

/* Vertical divider */
.Divider--vertical {
  display: inline-block;
  width: 1px;
  height: 1em;
  background-color: var(--bd);
  vertical-align: middle;
}

/* Labeled divider */
.Divider--label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  border: none;
}

.Divider--label::before,
.Divider--label::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--bd);
}

.Divider--label span {
  font-size: 0.85rem;
  color: var(--fg-3);
  white-space: nowrap;
}

/* Label positions */
.Divider--label-left::before { flex: 0 0 24px; }
.Divider--label-right::after { flex: 0 0 24px; }

Accessibility

  • Use <hr> for semantic dividers — screen readers announce it as a separator
  • Decorative dividers should use role="presentation" or aria-hidden="true"
  • Labeled dividers provide additional context for all users

Keyboard Support

Key Action
N/A Dividers are not interactive and receive no keyboard focus

Screen Reader Guidance

<!-- Semantic divider -->
<hr class="Divider">

<!-- Decorative divider -->
<hr class="Divider" role="presentation">

<!-- Labeled divider (semantic) -->
<div class="Divider Divider--label" role="separator">
    <span>Section</span>
</div>

Best Practices

Do

  • ✓ Use sparingly — Dividers add visual weight; whitespace often suffices
  • ✓ Group related content — Dividers separate distinct sections, not every element
  • ✓ Match spacing to hierarchy — Use --loose for major sections, --tight for minor
  • ✓ Use labels for clarity — “Or” in login forms, section names in settings
  • ✓ Use semantic <hr> — Provides meaning for screen readers
  • ✓ Be consistent — Pick one style (solid/dashed/dotted) and stick with it

Don’t

  • ✗ Overuse dividers — More than 3-4 visible dividers crowds the interface
  • ✗ Use between every element — Creates visual noise and defeats the purpose
  • ✗ Mix styles randomly — Inconsistent dashed/dotted/solid looks messy
  • ✗ Use dividers instead of spacing — Margins and padding are lighter alternatives
  • ✗ Forget vertical dividers in flex layouts — They need explicit height to render
  • ✗ Add dividers inside tight components — Cards and chips don’t need extra lines