stylesheet

List

A series of items marked with numbers or bullet points.

Basic Usage

You can add the class list to any ol or ul element to style it.

  1. Item 1
  2. Item 2
  3. Item 3
  • Item 1
  • Item 2
  • Item 3
HTML Copied! 
<ol class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Nested Lists

You can nest Lists inside each other, even mixing ordered and unordered Lists. Make sure to add the list class to each nested List.

  1. Item 1
    1. Sub-item 1
    2. Sub-item 2
      1. Sub-sub-item 1
      2. Sub-sub-item 2
        1. Sub-sub-sub-item 1
        2. Sub-sub-sub-item 2
  • Item 1
    • Sub-item 1
    • Sub-item 2
      • Sub-sub-item 1
      • Sub-sub-item 2
        • Sub-sub-sub-item 1
        • Sub-sub-sub-item 2
HTML Copied! 
<ol class="list">
  <li>
    Item 1
    <ol class="list">
      <li>Sub-item 1</li>
      <li>
        Sub-item 2
        <ol class="list">
          <li>Sub-sub-item 1</li>
          <li>
            Sub-sub-item 2
            <ol class="list">
              <li>Sub-sub-sub-item 1</li>
              <li>Sub-sub-sub-item 2</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
<ul class="list">
  <li>
    Item 1
    <ul class="list">
      <li>Sub-item 1</li>
      <li>
        Sub-item 2
        <ul class="list">
          <li>Sub-sub-item 1</li>
          <li>
            Sub-sub-item 2
            <ul class="list">
              <li>Sub-sub-sub-item 1</li>
              <li>Sub-sub-sub-item 2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>