Evo

Icon Size

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

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.

<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>
<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>
<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>
<ul class="levo-icon-list icon-size-large">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<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.

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