Skip to main content
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.

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

Variants

Orientation

Horizontal

Horizontal dividers separate stacked content vertically. This is the default orientation.

A divider is horizontally oriented.

Vertical

Vertical dividers separate content arranged side-by-side. Use between grouped controls, panels, or columns where spacing alone does not provide enough separation.

A divider is vertically oriented.

Appearance

Solid

Solid dividers provide the clearest, most consistent way of sectioning content on the page. Use in most situations.

A divider is styled as solid.

Dashed

Dashed dividers create a softer boundary than solid. Use when separation is needed but the relationship is secondary. Use sparingly.

A divider is styled as dashed.

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 Forge’s spacing tokens which override the default and component token values.

A divider is positioned below each of two list items. The left edge of the dividers are inset on the left edge to align with the left edge of the list item text. The right side of the dividers expand 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.