A divider is a 1px line that separates content groups, so users can scan and organize information. It is decorative and never interactive.
The line, the tokens and the requirements. Values come from the live token package and from Figma: Divider.
Resolved from the live token package.
| Color | Use | Token | Value |
|---|
| Variant | Thickness | Length |
|---|---|---|
| Horizontal | 1px (height) | Fills the container (width: 100%) |
| Vertical | 1px (width) | Fills the row height (align-self: stretch) |
The thickness is a hairline: there is no spacing token for it, and a divider is never thicker. The size does not change with the breakpoint.
| Attribute | Value |
|---|---|
| Thickness | 1px |
| Horizontal length | The width of the container |
| Vertical length | The height of the row |
| Padding and margin | None: the space comes from the parent gap |
A divider has no padding or margin of its own, so there is no measurement figure.
The space around a divider belongs to the parent. Use a spacing token for the gap.
| Part | Value |
|---|---|
| Space above and below a horizontal divider | The parent gap, a spacing token such as space-16 |
| Space beside a vertical divider | The parent gap, a spacing token such as space-24 |
A divider has no states: no hover, focus, active or disabled.
| Element | Class | Notes |
|---|---|---|
| Line | divider | An <hr> (horizontal) or a span (vertical). Primary color. |
| Color | divider--secondary, divider--tertiary | Replace the Primary color. |
| Direction | divider--vertical | A 1px wide line that stretches to the height of a flex row. |
| Type | Class | Use |
|---|---|---|
| Horizontal | divider | Between sections, list rows or form groups. |
| Vertical | divider divider--vertical | Between items in a flex row. |
A horizontal divider is as wide as its container.
| Topic | Result |
|---|---|
| Input | None. A divider has no hover, focus or click. |
| Breakpoint | The same on every breakpoint. |
| Motion | None. |
| Topic | Requirement |
|---|---|
| Semantics | Use <hr> (or role="separator") when the line separates content for everyone. Use aria-hidden="true" when it is only visual. |
| Vertical | Set role="separator" and aria-orientation="vertical". |
| Color | Never rely on color alone. If the line carries meaning, the structure (headings, lists) must also show the grouping (WCAG 1.3.1). |
| Contrast | Ensure enough contrast if the line carries meaning (WCAG 1.4.11). Prefer Primary or Tertiary over Secondary. |