List

Basic list

you can order a list of items by using the class .list

Normal ul:

  • item 1
  • item 2
  • item 3

ul with .list

<ul class="list">
    <li class="item">
        Lorem ipsum dolor
    </li>
    <li class="item">
        Lorem ipsum dolor
    </li>
    <li class="item">
        Lorem ipsum dolor
    </li>
</ul>
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor

Hoverable List

You can add a hover animation by adding the class .hoverable

<ul class="list hoverable">
    ...
</ul>
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor

List Separated

If you want you can separate each list item by adding the class .list-separated

<ul class="list list-separated">
    <li class="item">
        Lorem ipsum dolor
    </li>
    <li class="item">
        Lorem ipsum dolor
    </li>
    <li class="item">
        Lorem ipsum dolor
    </li>
</ul>
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor

List bordered

You can also add .list-border class in order to make list item bordered

<ul class="list list-border">
    <li class="item">
        Lorem ipsum dolor
    </li>
    <li class="item">
        Lorem ipsum dolor
    </li>
    <li class="item">
        Lorem ipsum dolor
    </li>
</ul>
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor