Evo

List Bullet

Highly customized unordered lists of bullets. Text Lists are more dependent upon HTML and CSS resets than other elements, particularly to control indents. For additional elements that use a bullet, see the glyph elements, particularly glyph-list and glyph-play. Pseudo classes for space :before and :after are available in space-padding and space-margin.

evo-list-bullet

 <ul class="evo-list-bullet">
  <li>List item level 1</li>
  <li>List item level 1 lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  Nisi suscipit autem accusantium quibusdam reiciendis incidunt sed, amet perspiciatis, 
  sequi cum aperiam sunt excepturi corporis.</li>
    <ul>
      <li>List item level 2</li>
      <li>List item level 2 lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Asperiores consectetur, dolore laboriosam, porro cumque optio? Aliquid aperiam expedita, 
      magni, cum ex, quaerat veritatis pariatur quibusdam nostrum omnis, suscipit itaque beatae.</li>
    </ul>
    <ul>
       <li>List item level 2</li>
       <li>List item level 2</li>
         <ul>
          <li>List item level 3</li>
          <li>List item level 3</li>
        </ul>
    </ul>
  <li>List item level 1</li>
  <li>List item level 1</li>
  </ul>

These are nested unordered <ul> lists. Create <ul> tags that contain <li> tags. List variables can be adjusted in _global.scss

  • List item level 1
  • List item level 2
  • List item level 3
 <ul class="evo-list-bullet-inverse text-inverse">
  <li>List item level 1</li>
  <li>List item level 2</li>
  <li>List item level 3</li>
  </ul>

For inverse style, apply the evo-list-bullet-inverse class to the <ul> tag. List variables can be adjusted in _evo_variables.scss

list-bullet

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

This is a <ul> list with a customized • bullet. It is constructed in a simpler manner than the evo-list-bullet class above, and therefore may be easier to mix and modify with other classes. Bullet colors and bullet glyph characters can be customized. Create a <ul> tag that contains <li> tags, and apply the list-bullet class. Change the glyph character by mixing a class such as bullet-dash to the <ul> tag. Use the bullet-gray class make the bullets look more neutral. Nested lists must also have the list-bullet class. Use the list-bullet-right class to move the bullets to the right and combine with a class such as bullet-arrow-right. List variables can be adjusted in _evo_variables.scss

<ul class="list-bullet-after bullet-arrow-after>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

Use instead the list-bullet-after class to move the bullets to the right and combine with a class such as bullet-arrow-after to customize the styling.

<ul class="list-bullet-after bullet-hover-after bullet-arrow-after>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

Combine with the bullet-hover-after class to create a hover animation.