Carbon Design System

Lists consist of related content grouped together and organized vertically.

Experimental Ordered List

Ordered List level 1
1. Ordered List level 2
2. Ordered List level 2
Ordered List level 1
Ordered List level 1

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<ol class="bx--list--ordered">
  <li class="bx--list__item">Ordered List level 1
    <ol class="bx--list--nested">
      <li class="bx--list__item">Ordered List level 2</li>
      <li class="bx--list__item">Ordered List level 2</li>
    </ol>
  </li>
  <li class="bx--list__item">Ordered List level 1</li>
  <li class="bx--list__item">Ordered List level 1</li>
</ol>

Experimental Unordered List

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

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<ul class="bx--list--unordered">
  <li class="bx--list__item">Unordered List level 1
    <ul class="bx--list--nested">
      <li class="bx--list__item">Unordered List level 2</li>
      <li class="bx--list__item">Unordered List level 2</li>
    </ul>
  </li>
  <li class="bx--list__item">Unordered List level 1</li>
  <li class="bx--list__item">Unordered List level 1</li>
</ul>

Documentation

SCSS

Modifiers

Use these modifiers with .bx--list class.

Selector	Description
`.bx--list--unordered`	Use to apply styles to an unordered list
`.bx--list--ordered`	Use to apply styles to an ordered list
`.bx--list--nested`	Use to apply styles to a nested list inside an ordered or unordered list