Divider

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

Anatomy

The divider component is made up of three elements.

  1. Container
  2. Inset
  3. Border

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.

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.

Component tokens

The following component tokens are available for customizing the divider component.

Sample references including the swatch and computed values currently represent the applied light theme.

The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.

Color

Border

Space