Dividers - ArchCSS

Basic divider

Add .divider to any element. Non-empty dividers keep their content centered between two lines; empty dividers collapse into a single rule.

Preview

<!-- With a label -->
<div class="divider">OR</div>

<!-- Empty - renders as a plain rule -->
<div class="divider"></div>

Height

Set the rule thickness with the height attribute - values 1 through 5 map to pixel widths.

thin

medium

thick

<div class="divider" height="1">thin</div>
<div class="divider" height="5">thick</div>

Line style

Change the border style with a .{style}-border-line modifier class.

solid

dashed

dotted

double

<div class="divider dashed-border-line">dashed</div>
<div class="divider double-border-line" height="3">double</div>

Class	border-style
`.solid-border-line`	`solid` (default)
`.dashed-border-line`	`dashed`
`.dotted-border-line`	`dotted`
`.double-border-line`	`double` (requires a `height` ≥ 3)
`.hidden-border-line`	`hidden`
`.inset-border-line`	`inset`
`.groove-border-line`	`groove`

Line proportions

By default the two lines split evenly (50/50) around the label. Add a .span-before-{n} / .span-after-{n} pair to shift the balance using the same 1–12 flex scale as flexbox utilities.

skewed

<div class="divider span-before-1 span-after-12">
  Short lead-in, long tail
</div>

Any content works. A divider is a flex container - drop in text, an icon, a badge, or nothing at all.

Reference

Class / attribute	Purpose
`.divider`	Base divider element
`height="1"`…`"5"`	Rule thickness in pixels
`.{style}-border-line`	Border style modifier
`.span-before-{1–12}`	Flex-grow for the leading line
`.span-after-{1–12}`	Flex-grow for the trailing line