Evo

List Ordered

Standard ordered <ol> lists. For more options and control over number styles, use list-number.

ol

  1. List item level 1
  2. List item level 1 lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit autem accusantium quibusdam reiciendis incidunt sed, amet perspiciatis, sequi cum aperiam sunt excepturi corporis.
    1. List item level 2
    2. List item level 2 lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur, dolore laboriosam, porro cumque optio? Aliquid aperiam expedita, magni, cum ex, quaerat veritatis pariatur quibusdam nostrum omnis, suscipit itaque beatae.
    1. List item level 2
    2. List item level 2
      1. List item level 3
      2. List item level 3
  3. List item level 1
  4. List item level 1
<ol>
  <li>List item level 1</li>
  <li>List item level 1 lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  Nisi suscipit autem accusantium quibusdam reiciendis incidunt sed, amet perspiciatis, 
  sequi cum aperiam sunt excepturi corporis.</li>
    <ol>
      <li>List item level 2</li>
      <li>List item level 2 lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Asperiores consectetur, dolore laboriosam, porro cumque optio? Aliquid aperiam expedita, 
      magni, cum ex, quaerat veritatis pariatur quibusdam nostrum omnis, suscipit itaque beatae.</li>
    </ol>
    <ol>
       <li>List item level 2</li>
       <li>List item level 2</li>
         <ol>
          <li>List item level 3</li>
          <li>List item level 3</li>
        </ol>
    </ol>
  <li>List item level 1</li>
  <li>List item level 1</li>
  </ol>

Demonstration of nested ordered <ol> lists. Create <ol> tags that each contain <li> tags.

ol

  1. list item 1
  2. list item 2
  3. list item 3
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Create an <ol> tag that contains <li> tags.

list-decimal

  1. list item 1
  2. list item 2
  3. list item 3
<ol class="list-decimal">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Create an <ol> tag that contains <li> tags. Add the list-decimal class.

list-decimal-zero

  1. list item 1
  2. list item 2
  3. list item 3
<ol class="list-decimal-zero">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Create an <ol> tag that contains <li> tags. Add the list-decimal-zero class.

list-lower-alpha

  1. list item 1
  2. list item 2
  3. list item 3
<ol class="list-lower-alpha">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Create an <ol> tag that contains <li> tags. Add the list-lower-alpha class.

list-upper-alpha

  1. list item 1
  2. list item 2
  3. list item 3
<ol class="list-upper-alpha">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Create an <ol> tag that contains <li> tags. Add the list-upper-alpha class.

list-lower-latin

  1. list item 1
  2. list item 2
  3. list item 3
<ol class="list-lower-latin">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Create an <ol> tag that contains <li> tags. Add the list-lower-latin class.

list-upper-latin

  1. list item 1
  2. list item 2
  3. list item 3
<ol class="list-upper-latin">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Create an <ol> tag that contains <li> tags. Add the list-upper-latin class.

list-lower-roman

  1. list item 1
  2. list item 2
  3. list item 3
<ol class="list-lower-roman">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Create an <ol> tag that contains <li> tags. Add the list-lower-roman class.

list-upper-roman

  1. list item 1
  2. list item 2
  3. list item 3
<ol class="list-upper-roman>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Create an <ol> tag that contains <li> tags. Add the list-upper-roman class.

extended classes

Extended utility classes include list-armenian, list-cjk-ideographic, list-georgian, list-hebrew, list-hiragana, list-hiragana-iroha, list-katakana, list-katakana-iroha, list-lower-greek.