Divider

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<hr class="aparte-divider">
<div class="aparte-divider aparte-divider--label">
  <span class="aparte-divider__label">or</span>
</div>

Horizontal, vertical, optionally labelled

The line is a BORDER, not a background — see the progress bar’s comment above for why: a background disappears under forced-colors, a border does not.

Classes

.aparte-divider · .aparte-divider--label · .aparte-divider--vertical · .aparte-divider__label

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.