Usage
A divider is a thin line that separates content, groups, or sections. Use one when spacing alone isn’t enough to show where a group ends, and keep it subtle enough to organize the layout without competing with the content.
- Use to separate stacked rows, lists, or sections that spacing alone doesn’t distinguish.
- Align an inset divider with the text or icon it sits alongside.
- Use a divider where space, a heading, or a subhead would do the same work.
Design properties
| Property | Values | Default |
|---|---|---|
| Type Variant | Full-width | Inset | Middle-inset | Divider with subhead | Full-width |
| Orientation Variant | Horizontal | Vertical | Horizontal |
Types
Full-width
Use Horizontal as the default divider between stacked rows, lists, or sections. Use Vertical to separate content or regions sitting side by side. It spans the full width or height with no margins.
Inset
Use Horizontal when the divider should start where the text or icon starts. Use Vertical when the divider should start below the top edge. It has a margin on the leading or top edge only.
Middle-inset
Use Horizontal to separate content that sits inset from both edges. Use Vertical to separate side-by-side content that sits inset from both ends. It has a margin on both edges.
Divider with subhead
Use when a group of content needs a label as well as a separation from what comes before it. Only use with a horizontal divider.
Behavior and interaction
Behavior
- A divider is static and non-interactive.
- It responds to theming and viewport changes, keeping the same separation across screen sizes.
Positioning
- Align dividers flush with container edges. Margins are built into the component, so every variant is used at full width.
- Align an inset divider with the leading edge of the text or icon beside it.
- Use one inset value per layout.
- Don’t nest a divider inside padded content that shortens its span.
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Oct 25, 2025 |
1.0.0 |
Initial draft of guidance |