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]

list item 1
list item 2
list item 3

text-size-6

list item 1
list item 2
list item 3

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

list item 1
list item 2
list item 3

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

list item 1
list item 2
list item 3

<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.