Skip to main content

Divider

A divider creates visual hierarchy and rhythm within a layout by partitioning content into meaningful sections.

Code documentation

Web

Anatomy

The divider component is made up of three elements.

  1. Container
  2. Inset
  3. Border
Anatomy diagram numbering three elements of a checkbox.

Variants

Inset

Insets allow you to align the left edge of the divider’s visible border with adjacent content. The inset space can be manually set using a component token or by selecting from a predefined list of options that correlate to the system’s spacing tokens which override the default and component token values.

A divider is positioned between two list items. The left edge of the divider is inset on the left edge to align with the left edge of the list item text. The right side of the divider expands to the right edge of the list.

Width

The default divider width of 1px should be maintained in most situations. However, in contexts where a thicker divider is warranted, a component token can be leveraged to manually adjust the divider’s width.

Style

Solid dividers provide the clearest, most consistent way of sectioning content on the page. If there are specific circumstances where a different style is needed, you can use a component token to adjust the style, but do so sparingly.