Divider
A thin line between two parts, horizontal or vertical, with an optional label in the middle.
-
.aparte-divider
On this page
html
<hr class="aparte-divider">
<div class="aparte-divider aparte-divider--label">
<span class="aparte-divider__label">or</span>
</div>.aparte-divider separates two parts of a panel: horizontal by default, vertical between items
in a row, and labelled when a word helps (“or”). The line is a border, not a background, so it
stays visible in forced-colours mode.
Customize
Section titled “Customize”| Variable | Default |
|---|---|
--aparte-divider-margin | var(--aparte-space-5) |
--aparte-divider-label-gap | var(--aparte-space-4) |
--aparte-divider-label-font-size | var(--aparte-font-size-sm) |
Classes
Section titled “Classes”.aparte-divider · .aparte-divider--label · .aparte-divider--vertical · .aparte-divider__label
Accessibility
Section titled “Accessibility”- A divider that separates sections can be an
<hr>, or carryrole="separator"; one that is only visual takesaria-hidden="true".