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.

Figma

Custom layouts

The list group is designed to be a way to consistently group together multiple list items. The component itself is nothing more than a default slot with an optional header. However, the Figma design kit includes a starter layout of ten basic list items to serve as a starting point. For basic list layouts, these list items may be customized within the component as needed. For more custom list groups, you may want to create your own “micro layout” of list items, componentize that, and then swap that into the list group default slot.