Components
Divider
Used to bring clarity and structure to a layout
Anatomy
A divider is used to provide visual separation of different content. Dividers can be applied vertically or horizontally. Divider is a visual cue to help to convey content separations and groupings.
- Line : a divider is a thin line placed either horizontally or vertically between elements.
Usage
Dividers are a subtle way to separate content into groups, sections, options, or parts. Many times, negative space will accomplish the same goal, so use them sparingly, as excessive use might overwhelm a user.
Common places divider appear: Between elements or section
When to use
- Use to represent thematic breaks between elements.
- Need to divide sections of content from each other.
- Use to separate content into clear groups.
When not to use
- Avoid using for presentational purposes only.
- Don’t use strong colors in dividers.
- Don’t use dividers for replacing card components.
Accessibility
A divider pauses the screen reader from continuing to read content in a new section. Users need to swipe forward to move past the divider and indicate the start of a new section of content. Dividers should be used sparingly and only if content cannot be separated by white space. Divides content into clear groups.
Do : Full width & thin
Use Dividers to separate collections of content or create the appearance of containers
Don't : Custom width & thick
Inset Divider in a way that causes it to be free-floating or separated from content
Content
Divider has no content guidelines itself, but plays a role informatively and semantically around how content should be grouped and separated. Such as :
- Divides content into clear groups
- A divider is informative so must be perceivable to all users
- Dividers should be used sparingly and only if content cannot be separated by white space
- A screen reader experience needs to mirror the visual experience to let the user know that a new “section” has been started after a divider is visually presented