Do's and Don'ts
Avoid overusing dividers and separators which can create visual noise
Consider using whitespace as an alternative for subtle content separation
Use stronger dividers for major content sections, and subtler ones for minor separations
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.
Usage
Content Organization: Use to visually separate different sections or groups of content
Visual Hierarchy: Implement to establish relationships between content elements
Readability: Apply to break up long sections of content to improve scanning and comprehension
Logical Grouping: Utilize to group related items together while separating them from other content
Spatial Context: Create visual boundaries between different functional areas of an interface
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
Color Variants
Default: Using
--SeparatorGrey Background:
--Separator-Contrast
Accessibility
Since dividers and separators are decorative elements, they should be hidden from screen readers to avoid unnecessary announcements.
Ensure dividers are implemented with
aria-hidden="true"or as CSS pseudo-elementsDon't rely solely on dividers to communicate content structure; ensure logical document structure
Maintain sufficient contrast between dividers and their background (minimum 3:1 ratio)
Don't use dividers to replace proper heading structure or semantic grouping of content