Examples

Unordered list

.ds-c-list

<ul class="ds-c-list" aria-labelledby="unordered-list-id">
  <li>List item 1</li>
  <li>List item 2</li>
</ul>

Ordered list

.ds-c-list

<ol class="ds-c-list" aria-labelledby="ordered-list-id">
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

Unstyled list

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

<ul
  role="list"
  class="ds-c-list ds-c-list--bare"
  aria-labelledby="unstyled-list-id"
>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>

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