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
Code:
<!--
  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--ordered 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>
  • Unordered List level 1
    • Unordered List level 2
    • Unordered List level 2
  • Unordered List level 1
  • Unordered List level 1
Code:
<!--
  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--unordered 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