Divider
A quiet rule between sections, across or upright, with an optional word in the middle such as "or".
Tier 1 · CSS only
Separator
preview
Example
Section one
Section two
or
Item
Item
Item
Show the markup
<div class="kit-stack demo-fill" data-gap="4">
<p class="demo-text">Section one</p>
<hr class="kit-divider">
<p class="demo-text">Section two</p>
<div class="kit-divider" role="separator" aria-label="or">or</div>
<div class="kit-cluster" data-gap="3"><span class="demo-text">Item</span><hr class="kit-divider" aria-orientation="vertical"><span class="demo-text">Item</span><hr class="kit-divider" aria-orientation="vertical"><span class="demo-text">Item</span></div>
</div>
Usage
<hr class="kit-divider">
<div class="kit-divider" role="separator" aria-label="or">or</div>
<hr class="kit-divider" aria-orientation="vertical">
data-strong uses the stronger line colour. Reach for space before a divider: a gap in a stack often separates sections well enough on its own.
Accessibility
<hr> is a separator to screen readers. A divider that's only decoration (between items already in a list, say) can be a border instead.- A labelled divider is a
<div role="separator"> with the word as its aria-label, because a separator's text isn't read on its own.
- An upright divider inside a toolbar takes
aria-orientation="vertical", which also sets its shape.