Example: section separation
Use thin dividers for list items and medium dividers for independent content sections. Use in moderation
Don't overuse dividers — whitespace can also serve as separation. Don't use dividers as pure decoration
Keep divider colors consistent with the overall design system
Don't attach interactive elements to dividers. Don't use dividers as a substitute for proper spacing (margin/padding)
Divider is a purely presentational component with no interactive behavior.
| Requirement | Implementation |
|---|---|
| Semantic role | Use <hr> element or role="separator" |
| Vertical divider | Add aria-orientation="vertical" |
| Contrast | Divider color-to-background contrast ≥ 3:1 |
| Decorative | If used purely for visual decoration, add aria-hidden="true" |