# 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