Lists help organize and emphasize information visually.


Unordered list

Organizes item collections that lack numerical ordering and do not have any relevance based on their order.

See the Pen List: Unordered list by USANA UX (@usana_ux) on CodePen.

Ordered list

The items in an ordered list are numbered and arranged in order.

See the Pen List: Ordered list by USANA UX (@usana_ux) on CodePen.

Icon list

Icons are a good way to highlight the features of a product.

See the Pen List: Icon list by USANA UX (@usana_ux) on CodePen.

Indented list

A list can be indented between two blocks of text, such as a header or paragraph.

See the Pen List: Indented list by USANA UX (@usana_ux) on CodePen.

Nested list

A nested list is one that appears within another list as an element. As a default, nested lists receive bullets/numbers from their parent lists.

See the Pen List: Nested by USANA UX (@usana_ux) on CodePen.



  • Prefix: Numbers, bullets, or icons.
  • List item: Links, graphics, or static text.


Best Practices

  • Lists should be written in sentence case and capitalized.
  • A list may contain square or circle bullets if it is ordered, or numbers, letters, or roman numerals if it is unordered.
  • Punctuation should be used according to the text.
  • Use logical sorting methods, such as alphabetical, numerical, chronological, and or user-defined.


  • Applying the default body style (16 pixels with a line-height of 24 pixels) or more to your stacked links creates a minimum space between touch points and is the simplest and most straightforward solution for anyone who suffers with fine motor skills.
  • Consider adding an id property to the header element of a list that contains a heading and an aria-labelledby attribute to the list element. When users access the list, screen readers will then read the header text aloud.