Divider
Airframe styles the native <hr> element directly. No class needed. Use role="separator" and aria-orientation="vertical" for a vertical divider (toolbars, split headers).
<p>Content above</p>
<hr />
<p>Content below</p>Preview
Section titled “Preview”Content above the divider
Content below the divider
Default spacing
Section titled “Default spacing”The <hr> element uses the --af-divider-spacing token (default var(--af-space-5)).
Override it globally to change the default gap across your project:
:root {
--af-divider-spacing: var(--af-space-3);
}Adjusting individual dividers
Section titled “Adjusting individual dividers”Use margin utilities to override spacing on a per-element basis:
<!-- Tight -->
<hr class="af-my-xs" />
<!-- Default (no class needed) -->
<hr />
<!-- Wide -->
<hr class="af-my-xl" />
<!-- None -->
<hr class="af-my-0" />Tight (af-my-xs)
Section titled “Tight (af-my-xs)”Section one
Section two
Default (no class)
Section titled “Default (no class)”Section one
Section two
Wide (af-my-xl)
Section titled “Wide (af-my-xl)”Section one
Section two
None (af-my-0)
Section titled “None (af-my-0)”Section one
Section two
On primary background
Section titled “On primary background”Use af-divider-on-primary for dividers inside hero/CTA sections on primary background:
<hr class="af-divider-on-primary" />Vertical
Section titled “Vertical”Use a semantic separator with aria-orientation="vertical". Works on <hr>, .af-divider, or any [role="separator"]. Place it in a flex row (af-inline).
<div class="af-inline">
<span>Inbox</span>
<hr role="separator" aria-orientation="vertical" />
<span>Archive</span>
</div>Archive
Spacing uses --af-divider-spacing on the inline axis.
CSS reference
Section titled “CSS reference”hr,
.af-divider {
border: none;
border-block-start: var(--af-border-width) solid var(--af-color-border);
margin-block: var(--af-divider-spacing);
}
[role='separator'][aria-orientation='vertical'] {
align-self: stretch;
margin-inline: var(--af-divider-spacing);
border-inline-start: var(--af-border-width) solid var(--af-color-border);
}