List

A list organizes information into discrete sequential sections.

Unordered List

Component Preview

Component Code


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

Component Preview

Component Code


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

Component Preview

Component Code


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

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.

Long narrative text.: If you need to communicate long lists of narrative text, consider using paragraphs or other formats.
Complex processes.: For step-by-step processes, consider the process list or step indicator component.

Use sentence case.: Begin lists with a capital letter and use sentence case for list items.
Use appropriate punctuation.: Use punctuation appropriate to the text. Do not leave sentences without periods.

Use semantic markup.: Always use proper <ul>, <ol>, and <li> elements so screen readers can properly announce the list and number of items.
Don't use lists for layout.: Don't use list elements purely for visual formatting. Screen readers will announce them as lists.

This component has no settings.

Variant	Description
`.usa-list`	Default list styling for unordered and ordered lists.
`.usa-list--unstyled`	Remove list styles (bullets and numbers).