List

Lists are used to organize content into groups of related information, making it easier for users to scan through your webpage and understand how certain information is connected.

View in Figma

Variations

<div className="padding-1">
  <h3 className="margin-bottom-1">Ordered List</h3>
  <ol class="usa-list">
    <li>Ordered list item</li>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
  </ol>
  <h3 className="margin-bottom-1">Unordered List</h3>
  <ul class="usa-list">
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
  </ul>
  <h3 className="margin-bottom-1">Unstyled List</h3>
  <ul class="usa-list usa-list--unstyled">
    <li>Unstyled list item</li>
    <li>Unstyled list item</li>
    <li>Unstyled list item</li>
  </ul>
</div>

Usage

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

Where to use

• Use lists within inner pages.

When to use

• 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.
• Unstyled: Use unstyled list to display a list of content items without any specific styling like numbers or bullets.

When to consider something else

• Displaying a compact list of multiple related content items within a landing page.
  • Alternative: Use the U.S. Web Design System's (USWDS’s) Collection component to highlight six or less related content items.

Accessibility

• Aria-Labels provide an accessible name for an element. If there is no visible name for the element, use aria-label to provide the user with a recognizable accessible name.

Code Snippets

Unordered List

<ul class="usa-list">
  <li>Unordered list item</li>
  <li>Unordered list item</li>
  <li>Unordered list item</li>
</ul>

Ordered List

<ol class="usa-list">
  <li>Ordered list item</li>
  <li>Ordered list item</li>
  <li>Ordered list item</li>
</ol>

Packages

Import this Sass partial into your stylesheet.

@forward "usa-list";