Skip to content
search icon
clear
Component Status

A divider is a thin line that separates content into clear groups.

Guidelines

Dividers are not meant to scream, they are subtle ways to group sections. Dividers can only be used in the colors UI Background/Default, UI Background/Light and UI Background/Medium. Dividers can be used full-width where allowed by parent container, or attached to a column's width.

Don't

  • Do not use colors that are not approved for dividers.
  • Do not change the thickness of the divider.
  • Do not change the style of the divider.

Variations

There are two divider variations available for use---Divider/Small and Divider/Medium. The divider line is the same in both of these, yet the spacing around the divider is different.

Demo

FigmaExternal linkFigma design of divider

Default


Small




Medium




✏️ Edit this page on GitHub