Lists

  1. Ordered Lists
  2. Unordered Lists
  3. Spacing for List Elements

Ordered Lists

Ordered lists (with preceding numerals, for when the order matters) are built with the ol element. You do not need to add a specific class to ordered lists.

A simple ordered list 
<ol>
  <li>Wake up</li>
  <li>Put on pants</li>
  <li>Leave house</li>
</ol>
  1. Wake up
  2. Put on pants
  3. Leave house

Unordered Lists

Unordered lists (where the order is not necessarily fixed) are built with the ul element and can be given a number of list icons to visually convey a meaning.

Available list types

You can currently choose from bullet lists (list-bullet) and checklists (list-check).

Different types of unordered lists 
<ul class="list-bullet">
  <li>Peanut</li>
  <li>Butter</li>
  <li>Jelly</li>
  <li>Baseball bat</li>
</ul>
  • Peanut
  • Butter
  • Jelly
  • Baseball bat
<ul class="list-check">
  <li>Brush teeth</li>
  <li>Have hot beverage of choice</li>
  <li>Remember to put pants on</li>
</ul>
  • Brush teeth
  • Have hot beverage of choice
  • Remember to put pants on

Spacing for List Elements

Often, list items should be spaced a bit more generously than block text. By default, list items follow each other directly, with only line height as a separator.

There are some shorthand classes that you can use to apply whitespace between all of a list's items without appending a margin class to each individual item.

These shorthand classes are list-spacing-*, with “*” being “xs” through “xl” (e.g. list-spacing-s).
All values correspond to the standard margin classes (i.e. list-spacing-xs has the same value as margin-bottom-xs).

Lists with different vertical spacings 
<ul class="list-check list-spacing-xs">
  <li>Peanut</li>
  <li>Butter</li>
  <li>Jelly</li>
</ul>
  • Peanut
  • Butter
  • Jelly
<ul class="list-check list-spacing">
  <li>Base</li>
  <li>Ball</li>
  <li>Bat</li>
</ul>
  • Base
  • Ball
  • Bat