Skip to main contentCarbon Design System

Structured list

Preview the structured list component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

Live demo

<StructuredListWrapper ariaLabel="Structured list">
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>
ColumnA
</StructuredListCell>
<StructuredListCell head>
ColumnB
</StructuredListCell>
<StructuredListCell head>
ColumnC
</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell>
Row 1
</StructuredListCell>
<StructuredListCell>
Row 1
</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell>
Row 2
</StructuredListCell>
<StructuredListCell>
Row 2
</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>