List – Carbon Design System

Ordered

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

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

Unordered

Unordered List level 1
Unordered List level 1
- Unordered List level 2
- Unordered List level 2
- Unordered List level 2
Unordered List level 1

CodeSandbox React Angular Vue Vanilla

<UnorderedList>
      <ListItem>
        Unordered List level 1
      </ListItem>
      <ListItem>
        Unordered List level 1
        <UnorderedList nested>
          <ListItem>
            Unordered List level 2
          </ListItem>
          <ListItem>
            Unordered List level 2
          </ListItem>
          <ListItem>
            Unordered List level 2
          </ListItem>
        </UnorderedList>
      </ListItem>
      <ListItem>
        Unordered List level 1
      </ListItem>
    </UnorderedList>

<UnorderedList>
      <ListItem>
        Unordered List level 1
      </ListItem>
      <ListItem>
        Unordered List level 1
        <UnorderedList nested>
          <ListItem>
            Unordered List level 2
          </ListItem>
          <ListItem>
            Unordered List level 2
          </ListItem>
          <ListItem>
            Unordered List level 2
          </ListItem>
        </UnorderedList>
      </ListItem>
      <ListItem>
        Unordered List level 1
      </ListItem>
    </UnorderedList>

Edit this page on GitHub

Components: Link

List: Usage