Skip to main content
U.S. Flag

An official website of the United States government

CMS Design System


Lists organize written information for users sequentially.


Typography sizing updates!

We've updated typography sizing variables and class names to make them more agnostic. Read about how you can update.


Unordered list


  • List item 1
  • List item 2

Ordered list


  1. List item 1
  2. List item 2

Unstyled list

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

  • List item 1
  • 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