Lists
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 (list-bullet
) and checklists (list-check
).
<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
).
<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