UI Components

Lists

The list modules can be used with the same effect on both ul’s and ol’s.

Contents

Bare

The list-bare module simply removes any indents and bullet points from lists.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
<ul class="listBare">
    <li class="listBare-item">Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li class="listBare-item">Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li class="listBare-item">Nulla volutpat aliquam velit</li>
    <li>Phasellus iaculis neque</li>
    <li class="listBare-item">Purus sodales ultricies</li>
    <li>Ac tristique libero volutpat at</li>
    <li class="listBare-item">Faucibus porta lacus fringilla vel</li>
</ul>

Block

The list-block object simply creates blocky lists from ul’s or ol’s.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Phasellus iaculis neque
  7. Purus sodales ultricies
  8. Ac tristique libero volutpat at
  9. Faucibus porta lacus fringilla vel
<ol class="listBlock">
    <li class="listBlock-item">Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li class="listBlock-item">Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li class="listBlock-item">Nulla volutpat aliquam velit</li>
    <li>Phasellus iaculis neque</li>
    <li class="listBlock-item">Purus sodales ultricies</li>
    <li>Ac tristique libero volutpat at</li>
    <li class="listBlock-item">Faucibus porta lacus fringilla vel</li>
</ol>

Inline

The list-inline object simply displays a list of items in one line.

  • Lorem
  • Consectetur
  • Integer
  • Facilisis
  • Nulla
  • Phasellus
  • Purus
  • Ac tristique
  • Faucibus
<ul class="listInline">
    <li class="listInline-item">Lorem</li>
    <li>Consectetur</li>
    <li class="listInline-item">Integer</li>
    <li>Facilisis</li>
    <li class="listInline-item">Nulla</li>
    <li>Phasellus</li>
    <li class="listInline-item">Purus</li>
    <li>Ac tristique</li>
    <li class="listInline-item">Faucibus</li>
</ul>

UI List

The list-ui object creates blocky, keyline-delimited list items.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Phasellus iaculis neque
  7. Purus sodales ultricies
  8. Ac tristique libero volutpat at
  9. Faucibus porta lacus fringilla vel
<ol class="listUi">
    <li class="listUi-item">Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li class="listUi-item">Integer molestie lorem at massa</li>
    <li class="listUi-item">Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit</li>
    <li>Phasellus iaculis neque</li>
    <li class="listUi-item">Purus sodales ultricies</li>
    <li>Ac tristique libero volutpat at</li>
    <li class="listUi-item">Faucibus porta lacus fringilla vel</li>
</ol>
Menu