Divider
A visual separator — typically a horizontal line — used to create distinct sections within a layout.
Plain English
A divider is a horizontal (or vertical) line that creates visual separation between sections. Used correctly, it defines where one content group ends and another begins without needing labels or boxes. Used incorrectly, it creates visual clutter — if everything is separated by lines, the lines stop communicating anything. The rule: prefer whitespace over dividers. Use a divider only when whitespace alone is not enough to signal a meaningful boundary.
Technical
HTML: <hr> element (semantic horizontal rule, accessible). CSS: border-top or border-bottom on a container element, or a div with height: 1px + background-color. Colour: ink-100 to ink-200 (very subtle). For section dividers with labels: position: relative with an absolutely centred text. Vertical dividers: border-left or border-right on flex/grid items. Avoid using dividers inside components unless the design system explicitly calls for them.
Live Demo
1. Simple divider
Section content above
Section content below
2. Thick section divider
Major section above
Major section below
3. Labeled divider
OR
4. Vertical divider
5. Space-only divider
Group A content
Group B content
No visible line — whitespace creates separation
The best divider is often whitespace. Use visible lines only between truly distinct sections.
Usage
✓ Good usage
A single 1px ink-200 divider between a user's basic info section and their account settings — clear boundary, minimal visual weight.
✗ Bad usage
Dividers between every item in a 20-item list — the lines become visual noise and whitespace would communicate the same separation more cleanly.
Recommended values
- 1px solid ink-100 or ink-200
- Margin: 16-24px above and below (not both large)
- Full-width or slightly indented from edges (16px)
- Optional label: centred text in ink-400, 12px, on a white background
- Vertical: 1px, height: 24-32px for inline separators
Common mistakes
- Too-dark dividers (ink-400+) — they draw too much attention.
- Dividers between every list item when whitespace is sufficient.
- Dividers within components (inside a card) — usually a sign the component has too many unrelated elements.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use 1px solid #E2E8F0 dividers with 20px vertical margin only between major content sections. In lists, use whitespace (row gap) instead of dividers unless the items are dense and tightly packed.