Contained list
Contained lists group content that is similar or related and can contain read-only or interactive information.
Overview
Contained lists are commonly used inside of containers like cards, sidebars, and disclosure situations. These lists have one header column of information with multiple list item rows. Contained lists help you organize related content within smaller spaces within a user interface and allow you to include inline actions and interactive elements.

When to use
- Use on a page inside of small spaces or in disclosure situations.
- Use when including interactive elements or inline actions in a list.
- To logically group items that follow the same content structure.
When not to use
- Do not use if the list content needs to be nested more than one level deep and becomes overly complex and lengthy. For these situations, use the data table component instead.
- Do not use if the list needs to contain multiple column headers, instead use the structured list component.
Variants
Variant | Purpose |
---|---|
On page list | Use this variant when placing the list in a persistent context like the main area in the user interface, such as on a card or in a sidebar. |
Disclosed list | Use this variant when the list is shown within a temporary context, for example within a popover or layer that is elevated by a drop shadow or border. |
Live demo
<div style={{ width: '75%' }}><ContainedList label="List title" kind="on-page"><ContainedListItem>List item</ContainedListItem><ContainedListItem>List item</ContainedListItem><ContainedListItem>List item</ContainedListItem><ContainedListItem>List item</ContainedListItem></ContainedList></div>
Formatting
Anatomy
Contained lists are made up of a list header, list title, list item rows, and optional interactive elements.

- List header: Area to group the succeeding list items.
- List title: Descriptive name for the group of list items.
- List item: The content with in a list item row.
- Interactive element (optional): An element that you can interact with or treat as an inline action, such as links, icons, and toggles.
Sizing
List header area
The list header height is always fixed. The on page variant style list header has a height of 48px. The disclosed variant style list header has a height of 32px.

List item row
List item row heights can vary based on the amount of content in each row. The content in each row is flexible. By default, each list item row height is 48px for one line of content.