Lists
Intro text.
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.
<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 (.bullet-list
) and checklists (.check-list
).
<ul class="bullet-list"> <li>Peanut</li> <li>Butter</li> <li>Jelly</li> <li>Baseball bat</li> </ul>
- Peanut
- Butter
- Jelly
- Baseball bat
<ul class="check-list"> <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
).
<ul class="check-list list-spacing-xs"> <li>Peanut</li> <li>Butter</li> <li>Jelly</li> </ul>
- Peanut
- Butter
- Jelly
<ul class="check-list list-spacing"> <li>Base</li> <li>Ball</li> <li>Bat</li> </ul>
- Base
- Ball
- Bat