List

Unordered list

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

Ordered list

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

Icon list

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

Indented list

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

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.

Anatomy

Styles

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.

Accessibility

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