Breadcrumb
  1. Home
  2. Design System
  3. Components
  4. List

List

A list organizes multiple related items in an easy-to-read format.

Required or optional: Optional

Use: Any time you have a text list of several items

Don’t use: When you have only one item

Types of Lists

Ordered lists (numbered)

Use an ordered list when list items have an inherent order. For example, a list of steps to follow.

Unordered lists (bulleted)

Use an unordered list when the list items have no inherent order. However, you may wish to display them in a particular order, such as alphabetical or chronological, for ease of reading.

We base bullet decoration on level.

  • The first level is a filled circle
  • The second level is a hollow circle
  • The third level is a square

The system applies the bullet style automatically, based on the content hierarchy.

Descriptive lists

Descriptive lists are sometimes called definition lists. Each list item has two parts: a term and a definition. This type of list is useful for content like glossaries.

How to format content that introduces a list

  • Separate the sentence or clause above the list from the sentences that come before it.
  • Don’t use visual cues like “below.” Directional language excludes users with visual impairments.
  • If the sentence before the list ends with include such a following etc., end with a colon.
  • If the introduction is a complete sentence, don’t use a colon.

How to format list items

  • Capitalize the first word of a bullet. Use the same grammatical structure — all nouns, all sentences, all clauses, etc.
  • Don’t use semicolons.
  • Complete sentences need ending punctuation. Incomplete sentences or nouns don’t.
  • Don’t use “or” or “and” after the second-to-last item.

Usability and accessibility notes

Start each list item with the most relevant word or words, to make a list easier to scan.

Example

Date Last Reviewed: