List – Carbon Design System

Preview the 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

Ordered list level 1
Ordered list level 1
1. Ordered list level 2
2. Ordered list level 2
3. Ordered list level 2
Ordered list level 1

CodeSandbox React Angular Vue Vanilla Web Components

Live editor for the Ordered list component

    <OrderedList>
      <ListItem>
        Ordered list level 1
      </ListItem>
      <ListItem>
        Ordered list level 1
        <OrderedList nested>
          <ListItem>
            Ordered list level 2
          </ListItem>
          <ListItem>
            Ordered list level 2
          </ListItem>
          <ListItem>
            Ordered list level 2
          </ListItem>
        </OrderedList>
      </ListItem>
      <ListItem>
        Ordered list level 1
      </ListItem>
    </OrderedList>


    <OrderedList>
      <ListItem>
        Ordered list level 1
      </ListItem>
      <ListItem>
        Ordered list level 1
        <OrderedList nested>
          <ListItem>
            Ordered list level 2
          </ListItem>
          <ListItem>
            Ordered list level 2
          </ListItem>
          <ListItem>
            Ordered list level 2
          </ListItem>
        </OrderedList>
      </ListItem>
      <ListItem>
        Ordered list level 1
      </ListItem>
    </OrderedList>

Edit this page on GitHub

List: Style

List: Accessibility