Skip to main contentCarbon Design System

Structured list

Structured lists group content that is similar or related, such as terms and definitions.

Overview

Structured list displays a simple list with a considerable amount of items of read-only values. It helps organize and present grouped information into logical and scannable patterns. The content within a list can be stacked to create hierarchy within the data.

When to use

  • To browse information or select certain information within the group in the simplest form
  • To view description and detailed information, present features, or compare pricing plans

When not to use

Nesting items is not recommended, as structured lists are used to present simple data. If you have more than 25 items or additional content that needs to be shown, consider using a data table, which supports nesting items and presents a larger set of content.

Variants

VariantPurpose
DefaultAllows the user to quickly browse and view information within a group of data
SelectableAllows the user to mark or select a desired option within a group of data

Live demo

<StructuredListWrapper ariaLabel="Structured list">
<StructuredListHead>
<StructuredListRow
head
tabIndex