Skip to main content

List group

A list group organizes related list items into a contained unit.

Code documentation

Web

Anatomy

The list group component is made up of two elements.

  1. Subheader
  2. Slot
Anatomy diagram numbering two elements of a list group.

Variants

Subheader

A subheader can be added to provide greater context for the related list items. This is particularly useful when you have multiple list groups together in the same list.

A sample list group heading is positioned immediately above a series of three list items represented as basic text.

Behavior

Text overflow

Subheader text should wrap to the next line when it is longer than its container.

The list group subheader text wraps to a second line when it meets the edge of an implied container around the group.