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

React
react icon
Web Components
webcomponents icon
Angular (Community)
angular icon
Vue (Community)
vue icon

Live demo

ColumnAColumnBColumnC
Row 1
Row 1
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.
Row 2
Row 2
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.
CodeSandbox React Web Components Angular Vue 


    <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>
Edit this page on GitHub
Previous
Structured list: Style
Next
Structured list: Accessibility