Text Lists are more dependent upon HTML and CSS resets than other elements, particularly to control indents, bullet styles, and number styles.


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

Sets padding and left margin spacing and removes bullets. Create a <ul> tag with the evo-list class. Place <li> tags nested underneath. Margin and padding variables can be adjusted in _evo_variables.scss


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

This simply removes the bullets from an unordered list. Create a <ul> or <ol>tag with the list-none class. Place <li> tags nested underneath. Variables can be adjusted in _evo_variables.scss


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

This hangs bullets beyond the left text axis. Create a <ul> tag and apply the list-hang and list-align 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>

Also works with an ordered <ol> list.

Mix Examples

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  5. List item 5
  6. List item 6
  7. List item 7
  8. List item 8
  9. List item 9
  10. List item 10
 <ol class="list-decimal-zero evo-list-lines gray-12 text-uppercase text-size-2 text-tracking-8 text-measure-2>
  <li><a href="javascript:void(0)">List item 1</a></li>
  <li><a href="javascript:void(0)">List item 2</a></li>
  <li><a href="javascript:void(0)">List item 3</a></li>
  <li><a href="javascript:void(0)">List item 4</a></li>
  <li><a href="javascript:void(0)">List item 5</a></li>
  <li><a href="javascript:void(0)">List item 6</a></li>
  <li><a href="javascript:void(0)">List item 7</a></li>
  <li><a href="javascript:void(0)">List item 8</a></li>
  <li><a href="javascript:void(0)">List item 9</a></li>
  <li><a href="javascript:void(0)">List item 10</a></li>

Mix and match classes to create new styles.

<ul class="list-bullet list-inline bullet-slash bullet-gray-light evo-gray-dark text-uppercase text-size-2 text-tracking-8 vertical-align-middle">
  <li><a href="javascript:void(0);">Breadcrumb 1</a></li>
  <li><a href="javascript:void(0);">Breadcrumb 2</a></li>
  <li><a href="javascript:void(0);">Breadcrumb 3</a></li>

Creatively mix classes to create a breadcrumb.