Lists are for showing a set of items in sequence, and can be nested to show some hierarchy.

Usage

Use a list to group related items and organize them vertically for easy scanning.

Types

Clarity has three types of lists: unordered, ordered, and unstyled.

Code Examples

Unordered Lists

• Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
• Ullamco laboris nisi ut aliquip
  • Consequat
  • Adipisicing
  • Exercitation
• Reprehenderit in voluptate
• Mollit anim id

<ul class="list">
  <li>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </li>
  <li>
    Ullamco laboris nisi ut aliquip
    <ul class="list">
      <li>Consequat</li>
      <li>Adipisicing</li>
      <li>Exercitation</li>
    </ul>
  </li>
  <li>Reprehenderit in voluptate</li>
  <li>Mollit anim id</li>
</ul>

Ordered Lists

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
2. Ullamco laboris nisi ut aliquip
   • Consequat
   • Adipisicing
   • Exercitation
3. Reprehenderit in voluptate
4. Mollit anim id
   1. Consequat
   2. Adipisicing
   3. Exercitation
5. Reprehenderit in voluptate

<ol class="list">
  <li>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </li>
  <li>
    Ullamco laboris nisi ut aliquip
    <ul class="list">
      <li>Consequat</li>
      <li>Adipisicing</li>
      <li>Exercitation</li>
    </ul>
  </li>
  <li>Reprehenderit in voluptate</li>
  <li>
    Mollit anim id
    <ol class="list">
      <li>Consequat</li>
      <li>Adipisicing</li>
      <li>Exercitation</li>
    </ol>
  </li>
  <li>Reprehenderit in voluptate</li>
</ol>

Unstyled Lists

• Id est laborum
• Dolore eu fugiat
• Occaecat cupidatat
• Deserunt mollit anim

<ul class="list-unstyled">
  <li>Id est laborum</li>
  <li>Dolore eu fugiat</li>
  <li>Occaecat cupidatat</li>
  <li>Deserunt mollit anim</li>
</ul>

Compact Lists

• Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
• Ullamco laboris nisi ut aliquip
  • Consequat
  • Adipisicing
  • Exercitation
• Reprehenderit in voluptate
• Mollit anim id

<ul class="list compact">
  <li>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </li>
  <li>
    Ullamco laboris nisi ut aliquip
    <ul class="list">
      <li>Consequat</li>
      <li>Adipisicing</li>
      <li>Exercitation</li>
    </ul>
  </li>
  <li>Reprehenderit in voluptate</li>
  <li>Mollit anim id</li>
</ul>