Components · Content
Divider
A rule that separates content. Horizontal or vertical.
Figma source: Divider ↗Examples
Horizontal and vertical
Proposal details
Budget
Draft
Last saved 14:02
R. Alvarez
<hr class="cds-divider cds-divider--horizontal">
<!-- Decorative vertical rule between inline items -->
<span class="cds-divider cds-divider--vertical" aria-hidden="true"></span>Figma properties
| Property | Values | Notes |
|---|---|---|
Direction | Horizontal · Vertical | Orientation. |
Usage
When to use it
- Use to separate groups where whitespace alone is not enough.
- Use the vertical divider between inline metadata items.
- Prefer spacing first; reach for a rule when the groups still read as one block.
When not to use it
- Do not use a divider immediately below a heading — the heading already separates.
- Do not stack dividers to create emphasis.
- Do not use one as a container border; that is Container.
Accessibility
- A structural separator is
<hr>, which carries an implicit separator role. - A purely decorative rule — the vertical one between inline items — should be
aria-hidden="true"so it is not announced. - The divider sits at 40% opacity on
--color-gray-500, which is decorative rather than informational and so is not held to a contrast minimum.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--divider-color | Rule colour | --color-gray-500 at 40% opacity |
--border-width-1 | Thickness | 1px |