Lists

Default

Our default unordered list has margin: 0 and padding-left: 1rem applied. List items have margin-bottom: .5rem.

Dogs
Cats
Birds

First
Second
Third

Markup

<!-- Unordered List -->
<ul>
  <li>Dogs</li>
  <li>Cats</li>
  <li>Birds</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

List

Adding list strips list-style-type, margin, and padding from the user agent stylesheet.

Demo

This is a list item.
This is a list item.
This is a list item.

Markup

<ul class="list">
   <li>This is a list item.</li>
   <li>This is a list item.</li>
   <li>This is a list item.</li>
 </ul>

Modifiers

Modifier †	Behavior
`list--inline`	An inline flex list.
`list--bordered`	Adds a bottom border when adding `list__item` to each child `<li>`

† The base class is always required.