Unordered list
Use the unordered list component to present a collection of items without specific ordering.
On this page
On this page
Anatomy
Usage
Use an unordered list to group related items together. It is suitable for presenting a collection of items that do not require a specific order or ranking. The unordered list provides visual dashes for each item, which helps to emphasize the individuality of each point and makes it easier for users to scan and comprehend the information.
Use an unordered list to present and group a list of items that don't require a specific order.
Don't use an unordered list to present a sequence of steps. Use an ordered list instead.
Use the unordered list to effectively provide a quick reference or highlight key points. This allows users to easily grasp the main ideas or features without having to read lengthy paragraphs. For lists that require a linear order, consider using an ordered list instead.
The unordered list should have concise and short items. Avoid using long sentences or paragraphs as they can be difficult to scan and comprehend. If you need to include a long item or even headings and links, consider using a pillar, a card or a river instead.
Use an unordered list for short and concise content items.
Don't use an unordered list for long and rich sentences, paragraphs, headings or links. Use a pillar, card or river components instead.
Options
Variant
The unordered list uses a dash to indicate each item in the list. The dash is the default variant and is suitable for most use cases. You can use check icons to indicate a list of features or benefits that are supported by the application. This way users can easily check off or easily compare the features that they might be interested in.
Use the check variant to indicate a list of features that are supported.
Don't include mutliple benefits in one single items, split them into multiple ones for better readability.
Related components
- Ordered list: to display a list of plain content items.
- Pillar: To display related content with less visual emphasis.
- Card: to display navigational related content with higher visual weight.
- River: To display a list of content items with a visual asset.