Divider

A horizontal or vertical separator line. Uses border-top for rhythm-safe rendering. Supports labels, vertical orientation, and spacing modifiers.

Default horizontal

<p>Content above the divider.</p>
<hr class="ln-divider" />
<p>Content below the divider.</p>

Content above the divider.

Content below the divider.

With label

<div class="ln-divider">
  <span class="ln-divider__label">Or continue with</span>
</div>

Or continue with

Vertical

<div class="d-flex align-items-center gap-3" style="height:48px">
  <span>Left</span>
  <div class="ln-divider ln-divider--vertical"></div>
  <span>Right</span>
</div>

Left

Right

Strong variant

<hr class="ln-divider ln-divider--strong" />

Spacing modifiers

<p>Content above medium spacing.</p>
<hr class="ln-divider ln-divider--space-md" />
<p>Content above large spacing.</p>
<hr class="ln-divider ln-divider--space-lg" />
<p>Content above extra-large spacing.</p>
<hr class="ln-divider ln-divider--space-xl" />
<p>Content below extra-large spacing.</p>

Content above medium spacing.

Content above large spacing.

Content above extra-large spacing.

Content below extra-large spacing.

Reference

Class	Description	Responsive
`.ln-divider`	Horizontal divider line	No
`.ln-divider__label`	Centred label with divider lines on each side	No
`.ln-divider--vertical`	Vertical divider	No
`.ln-divider--strong`	Thicker border	No
`.ln-divider--space-md`	24px vertical spacing	No
`.ln-divider--space-lg`	48px vertical spacing	No
`.ln-divider--space-xl`	72px vertical spacing	No