Divider
Airframe styles the native <hr> element directly. No class needed.
<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, which defaults to 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" />CSS reference
Section titled “CSS reference”hr {
border: none;
border-top: 1px solid var(--af-color-border);
margin: var(--af-divider-spacing, var(--af-space-5)) 0;
}
.af-divider-on-primary {
border-top-color: color-mix(in srgb, var(--af-color-on-primary) 15%, transparent);
}