Separator
A hairline that splits content into groups, horizontally or vertically.
Basic
Add .separator to an <hr> for a full-width rule. The bare element stays untouched by reboot, so the class is the opt-in; the color tracks the border token.
Vertical
Drop the --vertical modifier on a <div> inside a flex row. The rule stretches to the row's cross axis. Add role="separator" and aria-orientation="vertical" when the divide carries meaning.
Inside a card body
Use a separator to break a card into thematic blocks without a header or footer. The rule reaches the body padding's edge, matching the card's cadence.
Customization
These variables retune .separator without touching component CSS. Override on the element, a parent scope, or :root.
| Variable | Use |
|---|---|
--separator-thickness | Rule weight; defaults to the border-width custom. Bump for a louder split. |
--separator-color | Rule color; tracks the border token by default |
--separator-min-height | Floor height for a vertical rule when its flex parent can't stretch it |