Divider

Horizontal or vertical rule separating content. Use between logically distinct sections or between items in a list. Prefer whitespace over dividers when the layout makes groupings clear on its own. Add --strong when the rule needs more contrast than the default muted border.

a11y (built in): the horizontal rule is a native <hr>, so it keeps its implicit separator role for free; the inline vertical variant is an empty decorative <span> that contributes nothing to the accessibility tree. Pure CSS either way — no script, no state.

Usage: Always pair base and orientation — lb-divider lb-divider--horizontal on an <hr>, lb-divider lb-divider--vertical on an empty inline <span>; the base class alone only paints a background and carries no dimensions, so it renders collapsed. The horizontal rule ships with margin: 0 — vertical rhythm comes from the parent layout, not the divider. The vertical variant is 1em tall and middle-aligned, so it sizes off the surrounding text and sits directly between inline content with no extra wiring.

Divider Demo

Horizontal:

Inline vertical: Left Right