List Ordered

Need number lists, custom number color lists, demonstration of larger size

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 class="list-align">
  <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>

These are nested ordered <ol> lists. Create <ol> tags that each contain <li> tags. List variables can be adjusted in _global.scss

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.