Examples

Unordered list

.ds-c-list

Ordered list

.ds-c-list

Bare list

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

Unstyled list

role="list"

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. Safari will not recognize it as a list in the accessibility tree.

Learn more

• 18F Content Guide - Bulleted lists