See what's coming soon with Carbon V10-beta.

Skip to main content
Lists consist of related content grouped together and organized vertically.

Experimental Ordered List

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

Vanilla JS

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

Vanilla JS

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