Evo

List Size

Use a text-size-[number] class to adjust the size of a list, or use special list-padding-[number] classes to adjust space between list items.

text-size-[number]

text-size-6

text-size-4 is equal to the default text size.

text-size-2

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

To change the text size in a list, simply add a text class such as text-size-2 to the <ul> tag. A list without a text-size-[number] class will default to the website's standard text size. Text sizes 2, 4, and 6 are demonstrated above.

list-padding

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

A default list padding utility adds padding to the top and bottom of the <li> tags. Create a <ul> or <ol> tag and apply the optional evo-list class. Add a list-padding-[number] class such as list-padding-1. Default list styles are set in _evo_variables.scss.

list-padding-[number]

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

list-padding-15

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

list-padding-14

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

list-padding-13

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

list-padding-12

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

list-padding-11

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

list-padding-10

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

list-padding-9

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

list-padding-8

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

list-padding-7

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

list-padding-6

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

list-padding-5

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

list-padding-4

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

list-padding-3

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

list-padding-2

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

list-padding-1

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

A list padding utility adds padding to the top and bottom of the <li> tags. Create a <ul> or <ol> tag and apply the optional evo-list class. Add a list-padding-[number] class such as list-padding-1. Default list styles are set in _evo_variables.scss.

list-padding-none

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

The list-padding-none or list-padding-0 class will eliminate padding space between list items.