List
- Ordered List level 1
- Ordered List level 2
- Ordered List level 2
- Ordered List level 1
- 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 |