Separator
partialkit
Components for plain HTML.
Blog
Docs
Source
Docs
Source
<div style="display: grid; gap: 0.5rem"> <div> <p class="item-title">partialkit</p> <p class="item-description">Components for plain HTML.</p> </div> <hr class="separator" /> <div style="display: flex; align-items: center; gap: 0.75rem; height: 1.25rem"> <span class="item-description">Blog</span> <hr class="separator" data-orientation="vertical" /> <span class="item-description">Docs</span> <hr class="separator" data-orientation="vertical" /> <span class="item-description">Source</span> </div></div><hr class="separator" /><hr class="separator" data-orientation="vertical" />| Attribute | Meaning |
|---|---|
data-orientation="vertical" | A vertical rule that stretches to its container |
A vertical separator needs a parent with a height — it stretches to fill, and has nothing to fill in a container only as tall as its text.
Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading
direction on their own. See the button page for a live example.
Accessibility
Section titled “Accessibility”A rule between groups of controls is meaningful and should stay an <hr>. A line used as
decoration inside one control is not, and should be hidden from assistive tech.