Divider
Separates content groups. Optional centered or start label.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
OR
Recent
<div class="stack" style="width:100%;max-width:420px">
<hr class="px-divider">
<div class="px-divider" role="separator">OR</div>
<div class="px-divider px-divider--start" role="separator">Recent</div>
</div>Usage
- Prefer spacing first; add a divider when groups still blur.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-divider | class | <hr> or a div with role="separator" and a label. |
px-divider--start · --vertical | class | Label at start / vertical. |
Figma properties
Divider4 variants · page “Data display”Open
Separates content groups. Label=Start places text at the inline start (right in RTL). Use <hr> or role=separator.
| Property | Type | Values |
|---|---|---|
| Label text | Text | “OR” |
| Orientation | Variant | Horizontal Vertical |
| Label | Variant | None Center Start |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-divider-color | color-border-neutral-subtle | #f2f4f7 |
Accessibility
- Decorative dividers can be <hr aria-hidden="true">.