carbon-components/html/list/list--nesting.html

The Carbon Design System is IBM’s open-source design system for products and experiences.

<!--
  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
    <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
        <ol class="bx--list--ordered bx--list--nested">
          <li class="bx--list__item"> Ordered List level 3</li>
          <li class="bx--list__item"> Ordered List level 3
            <ul class="bx--list--unordered bx--list--nested">
              <li class="bx--list__item"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                venenatis
                aliquet odio ut viverra. Integer sollicitudin sed mi a finibus. Etiam massa ipsum, suscipit vitae nisl
                ut, semper euismod ante.</li>
              <li class="bx--list__item"> Unordered List level 4</li>
              <li class="bx--list__item"> Unordered List level 4</li>
            </ul>
          </li>
          <li class="bx--list__item"> Ordered List level 3</li>
        </ol>
      </li>
      <li class="bx--list__item"> Unordered List level 2</li>
    </ul>
  </li>
  <li class="bx--list__item">Ordered List level 1</li>
  <li class="bx--list__item">Ordered List level 1</li>
</ol>
<br>
<ul class="bx--list--unordered">
  <li class="bx--list__item">Unordered 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
        <ul class="bx--list--unordered bx--list--nested">
          <li class="bx--list__item"> Unordered List level 3</li>
          <li class="bx--list__item"> Unordered List level 3
            <ol class="bx--list--ordered bx--list--nested">
              <li class="bx--list__item"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                venenatis
                aliquet odio ut viverra. Integer sollicitudin sed mi a finibus. Etiam massa ipsum, suscipit vitae nisl
                ut, semper euismod ante.</li>
              <li class="bx--list__item"> Ordered List level 4</li>
              <li class="bx--list__item"> Ordered List level 4</li>
            </ol>
          </li>
          <li class="bx--list__item"> Unordered List level 3</li>
        </ul>
      </li>
      <li class="bx--list__item">Ordered List level 2</li>
    </ol>
  </li>
  <li class="bx--list__item">Unordered List level 1</li>
  <li class="bx--list__item">Unordered List level 1</li>
</ul>