List Number

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

evo-list-number

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="evo-list-number">
  <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>

This is an <ol> list with customized numbers. Number background colors can be customized for up to three levels of nested list. Create an <ol> tag that contains <li> tags, and apply the evo-list-number class. Add the list-number-counter-zero class to the <ol> to change the number format. Use the list-number-down class to scootch the numbers down a bit. List variables can be adjusted in _variables.scss