Divider

Anatomy

Content Area A
──────────────────────  ← Horizontal divider (thin: 1px / medium: 2px)
Content Area B

Content A  │  Content B      ← Vertical divider

1. Line — thin is 1 px, medium is 2 px, color --ds-color-divider-primary
2. Orientation — horizontal or vertical

Usage Guidelines

✅ Do

• Use thin dividers to separate list items (light separation without breaking reading flow)
• Use medium dividers to separate independent content sections (between cards and regions)
• Keep divider colors consistent with the overall design system
• Use in moderation — whitespace can also serve as separation

❌ Don't

• Don't overuse dividers — adding one everywhere fragments the page
• Don't use dividers as pure decoration (e.g. gradient colored lines)
• Don't attach interactive elements to dividers
• Don't use dividers as a substitute for proper spacing (margin/padding)

Interaction Behavior

Divider is a purely presentational component with no interactive behavior.

Accessibility