Skip to main content
U.S. Flag

An official website of the United States government

List

Lists organize written information for users sequentially.

Notice:

Typography sizing updates!

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

Examples

Unordered list

.ds-c-list

  • List item 1
  • List item 2

Ordered list

.ds-c-list

  1. List item 1
  2. List item 2
Warning:

It's worth mentioning that when list-style is removed from a list, Safari will not recognize it as a list in the accessibility tree.

To resolve this issue, role="list" should be added to a list where the styles have been removed.

Unstyled list

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

  • List item 1
  • List item 2

Guidance

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.

Usage

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

Accessibility

  • 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.

Learn more