List item

A list item is a single entry within a list that can contain various types of content such as text, links, images, or other elements. Each list item represents one distinct piece of information or element in the overall sequence.

List item

Usage

When to use
Use list items to break up large blocks of text into digestible chunks, show relationships between content, and highlight key information. Lists support efficient scanning and reading.
Content card image
Unordered list item
Use an unordered list when you don't need to convey a particular order or sequence.
Content card image
Numbered list item
Use a numbered list when the list items are sequential or keeping count is important, such as a list of instructions or a top 10 list.
Content card image
Icon list item
Use an icon list when it helps the users to scan, locate, and understand the descriptions better.
How best to use
Content card image
Do
Order list items in a logical way. For example, a list of product features should be ordered from the most important to the least important.
Content card image
Don't
Don't mix list items with different formats within the same list for reasons of readability and scannability.
Content card image
Don't
Don't use a numbered list when the content has no sequence, as it may create confusion.
Content card image
Don't
Don't over use list items as it will lose its effectiveness.
When not to use
Don't use it for complex data
Lists should be used to present simple pieces of information. For more complex and structured data, consider using a table.
⁠
Don't use list items when the description also comes with an action
List items are informational. Consider using the list component or other design patterns if you need to pair an action to the description.
Component comparison table
Component
Usage
Type of content
Can it include a button?
Layout
List
Used to present organised groups of interface elements, such as personal settings, portfolio breakdown, or list of notifications.
Supports text, icon, image and other rich content.
Yes
Supports multiple columns.
List item
Used as a single entry within a list to present content, options, or interface elements.
Only supports text content.
No
The content sits in one column.