Lists

Ordered Lists
Unordered Lists
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>

Wake up
Put on pants
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 coffee</li>
  <li>Remember to put pants on</li>
</ul>

Brush teeth
Have coffee
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