List

Lists present simple pieces of information that are related or have a similar structure. This makes the items easier to scan. Make sure the items have similar structures – don’t mix different grammar or capitalization.

If your information is complicated or includes items that aren’t just text, consider other components, such as tables.

Component status

Content structure

Guidelines

Use for similar items

Lists are good at making more complex information easy to scan. This works well when you have multiple items with similar information.

They are not designed to emphasize details. So don’t use them when you only have one item to set off from surrounding text.

Similarly, while lists provide a visual break, they shouldn’t be used just to break up long paragraphs. If you don’t have information that can be broken into similar pieces, break long paragraphs into shorter ones but don’t use a list.

Use parallel structures

Each item in the list should be phrased in a similar way. This consistency helps users scan to find the information they need. Varying the structure makes it harder to understand.

Use when order doesn’t matter

The list component presents information as unstructured lists. Don’t use it when the order of the items matters, such as a list of steps in a process. Instead, use an ordered list.

Use icons sparingly

Icons can help add emotion to your lists, such as checks in colorTextSuccess when listing features. They can also make details easier to scan, such as the icons in the content structure.

But too many different icons can draw too much attention and overwhelm users. Only use them if they provide clear value and don’t distract too much from important actions.

Related components

Table

Lists present a very simple grouping of information. If you need more complex structures without any interaction, consider presenting them in tables.

Checkbox/Radio

Lists are good for groups of related information. If there are choices associated with the information, use checkboxes or radio buttons to enable interaction.

ListChoice

Lists present a very simple grouping of information in a non-interactive way. If you need more complex structures where users can choose one or more of them, consider using list choices.