Icon Size

Use size utility to adjust icon sizes and placement next to text.

Icon Size Utility

TO DO: demonstrate icon size examples

<ul class="evo-icon-list icon-size-xxx-large">
<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-icon-list icon-size-xx-large">
<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-icon-list icon-size-x-large">
<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="levo-icon-list icon-size-large">
<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-icon-list icon-size-medium">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

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

list item 1
list item 2
list item 3

<ul class="evo-icon-list icon-size-small">
<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-icon-list icon-size-x-small">
<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-icon-list icon-size-xx-small">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

List Icon 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 text size class such as text-size-4. Default list styles are set in _evo_variables.scss.

list item 1
list item 2
list item 3

<ul class="evo-icon-list list-icon-xxx-large">
<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-icon-list list-icon-xx-large">
<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-icon-list list-icon-x-large">
<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="levo-icon-list list-icon-size-large">
<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-icon-list list-icon-medium">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

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

list item 1
list item 2
list item 3

<ul class="evo-icon-list list-icon-small">
<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-icon-list list-icon-x-small">
<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-icon-list list-icon-xx-small">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>