Overview
Dividers and separators are visual elements used to create distinct boundaries between content sections, enhance visual hierarchy, and improve content organization and readability. They help users understand the relationship between different content groups and create a clear visual structure on the page.
Anatomy
Divider
A divider is a horizontal line that spans the full width of its container, creating a clear separation between content sections above and below it.
Properties:
Thickness: Typically 1px (default), can be increased for stronger visual separation
Color: Usually uses a subtle neutral color (--color-border-separator)
Length: Spans the full width of its container
Padding: Can have vertical padding to create appropriate spacing from adjacent content
Separator
A separator is a shorter horizontal line that creates visual distinction between smaller content elements.
Properties:
Thickness: 1px (default)
Color: Uses a subtle neutral color (--color-border-separator)
Length: Can be customized, often shorter than a full divider
Alignment: Can be centered or aligned to the left/right edge
Vertical Separator
A vertical line that creates separation between elements arranged horizontally.
Properties:
Thickness: 1px (default)
Color: Uses a subtle neutral color (--color-border-separator)
Height: Can be customized based on the context
Alignment: Can stretch to full height or be centered vertically
Content Guidelines
Dividers and separators are used to group or separate related content. They should support readability and structure without interrupting the content flow.
Do's
Use dividers to separate distinct content sections with different purposes or meanings.
Ensure the content on either side of a divider is complete and understandable on its own.
Use dividers intentionally to reinforce hierarchy and content grouping.
Don’ts
Do not overuse dividers as excessive separation creates visual noise.
Do not rely on dividers to compensate for unclear content structure or labeling.
Do not use dividers between closely related lines of text where whitespace alone is sufficient.
Whitespace as an alternative
When content is closely related, prefer whitespace over dividers to maintain a smooth reading experience. Whitespace provides separation without adding visual or cognitive load.
Content hierarchy consideration
Use prominent dividers only when separating major content groups. For minor distinctions, rely on spacing, headings, or typographic hierarchy rather than visual separators. Be subtle.