Lists

Lists organize information into discrete sequential sections.

Unordered list
  • Unordered list item
  • Unordered list item
  • Unordered list item
Ordered list
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
Unstyled list
  • Unstyled list item
  • Unstyled list item
  • Unstyled list item
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="grid-row grid-gap">
    <div class="mobile-lg:grid-col-4">
      <h6 class="margin-0">Unordered list</h6>
      <ul class="usa-list">
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
      </ul>
    </div>

    <div class="mobile-lg:grid-col-4 margin-top-4 mobile-lg:margin-top-0">
      <h6 class="margin-0">Ordered list</h6>
      <ol class="usa-list">
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
      </ol>
    </div>

    <div class="mobile-lg:grid-col-4 margin-top-4 mobile-lg:margin-top-0">
      <h6 class="margin-0">Unstyled list</h6>
      <ul class="usa-list usa-list--unstyled">
        <li>Unstyled list item</li>
        <li>Unstyled list item</li>
        <li>Unstyled list item</li>
      </ul>
    </div>
  </div>

When to use the list component

  • Ordered list: Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.
  • Unordered list: Use unordered lists to display text in no specific order.

When to consider something different

  • If you need to communicate long lists of narrative text.

Usability guidelines

  • Use sentence case and begin lists with a capital letter.
  • Use punctuation appropriate to the text. Do not leave sentences without periods.

Implementation

  • For unstyled lists, use either the .usa-list.usa-list--unstyled classes or the unstyled list mixin: @include unstyled-list;.

Package information

  • Package usage: @import typography
  • Requires: required, global