List

Text Lists are more dependentent upon HTML and CSS resets than other elements, particularly to control indents.

evo-list

• list item 1
• list item 2
• list item 3

<ul class="evo-list">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

This removes the bullets from an unordered list and controls text styles. Create a <ul> tag with the evo-list class. Place <li> tags nested underneath. Variables can be adjusted in _variables.scss

list-none

• list item 1
• list item 2
• list item 3

1. list item 1
2. list item 2
3. list item 3

<ul class="list-none">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

This removes the bullets from an unordered list and controls text styles. Create a <ul> tag with the evo-list class. Place <li> tags nested underneath. Variables can be adjusted in _variables.scss

list-hang

• list item 1
• list item 2
• list item 3

<ul class="list-hang">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

This hangs bullets beyond the left text axis. Create a <ul> tag and apply the list-hang class.

1. list item 1
2. list item 2
3. list item 3

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

Also works with an ordered <ol> list.

List Example

1. List item level 1
2. List item level 1
3. List item level 1
4. List item level 1
5. List item level 1

 <ol class="list-decimal-zero evo-list-lines evo-text-6">
  <li>List item level 1</li>
  <li>List item level 1</li>
  <li>List item level 1</li>
  <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. List variables can be adjusted in _variables.scss