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.

<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="Divider Divider--label">
    <span>Or continue with</span>
</div>

Label Positions

Left
Section
Center (default)
Section
Right
Section 
<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>
</div>

Spacing Variants

Control the margin around dividers.

Tight spacing below:

Default spacing below:

Loose spacing below:

End of content.

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

Login Form

or

Common Patterns

Section Divider in a Settings Page

Account

Manage your account settings

Notifications

Configure alert preferences

Privacy

Control data sharing

Toolbar Separator

© 2026 Acme Corp

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