List Size

Use a list size or utility to adjust list text size, and padding between list items.

List Text Size

The easiest way to change the size of a list is to adjust the text size. Simply add a text class such as .evo-text-6 to the <ul> tag. Text sizes 2, 4, and 6 are demonstrated below.

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

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

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

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

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

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

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

List Size Utility

A list size utility sets a text size percentage relative to the base text size of a standard list, and may also tweak bullet or number placement. Create a <ul> tag and apply the optional .evo-list class. Add a list size class such as .list-size-small. Default list styles are set in _variables.scss.

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

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

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

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

list-size-medium is equal to the default text size.

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

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

List Padding Utility

A list padding utility adds padding to the top and bottom of the <li> tags. Create a <ul> tag and apply the optional evo-list class. Add a list padding class such as .list-padding-thin. Default list styles are set in _variables.scss.

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

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

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

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

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

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

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

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