Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know



Lists organize written information for users sequentially.


Typography sizing updates!

We've updated typography sizing variables and class names to separate semantics from presentation. Read about how you can update.


Unordered list


  • Unordered list item 1
  • Unordered list item 2

Ordered list


  1. Ordered list item 1
  2. Ordered list item 2

Bare list

.ds-c-list .ds-c-list--bare

  • Bare list item 1
  • Bare list item 2

Unstyled list


  • Unstyled list item 1
  • Unstyled list item 2


When to use

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

When to consider alternatives

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


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


  • When a list has a heading, consider adding an id attribute to the heading element, and an aria-labelledby attribute to the list element. Screen readers will then announce the heading text when users navigate to the list.
  • When using an unstyled list, role="list" should be added to the list element. Safari will not recognize it as a list in the accessibility tree.

Learn more