Structured list – Carbon Design System

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

Documentation

React

Angular (Community)

Vue (Community)

Web Components (Community)

Live demo

Theme selector

Variant selector

CodeSandbox React Angular Vue Vanilla Web Components

Live editor for the Default structured list component


    <StructuredListWrapper ariaLabel="Structured list">
      <StructuredListHead>
        <StructuredListRow
          head
          tabIndex={0}
        >
          <StructuredListCell head>
            ColumnA
          </StructuredListCell>
          <StructuredListCell head>
            ColumnB
          </StructuredListCell>
          <StructuredListCell head>
            ColumnC
          </StructuredListCell>
        </StructuredListRow>
      </StructuredListHead>
      <StructuredListBody>
        <StructuredListRow tabIndex={0}>
          <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 tabIndex={0}>
          <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

Structured list: Style

Structured list: Accessibility