Skip to main content

Components

Divider

Used to bring clarity and structure to a layout

banner-Divider

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.

anatomy divider guideline
  1. 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.

Alt text

Do : Full width & thin

Use Dividers to separate collections of content or create the appearance of containers

Alt text

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