Lists

Default

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

  • Dogs
  • Cats
  • Birds
  1. First
  2. Second
  3. 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.