A visual separator that divides content into distinct sections. Use to create clear boundaries between groups of related content, or to demarcate interactive regions within a layout.
ts
| Guidance | Practices |
|---|---|
| Do | Use subtle dividers between related content sections and strong dividers for high-contrast boundaries. |
| Do | Add a label to the divider when sections need a visible category heading. |
| Don't | Overuse dividers; rely on spacing and layout to separate content when possible. |
Divider that extends past container padding to span the full width. Use inside cards or panels when you want a clean edge-to-edge separation, like between an order summary and total.
Subtle, labeled, and strong dividers in a single card. Use subtle between related sections, labeled for alternatives like "or", and strong for high-contrast boundaries.
Vertical dividers separating side-by-side metrics. Use between stat cards, toolbar groups, or any horizontal layout where you need a visual boundary between sections.