List
It displays a set of connected items consecutively, either one below the other or inline. It offers flexible rendering options, including ordered lists, unordered lists, and other styles, while also allowing for visual customizations, such as adding colons to list items or rendering them with smaller font sizes.
Example
Anatomy
When to use
- Use bulleted lists when you don’t need to convey a specific order for list items.
- Use numbered lists (e.g.
ordered) when you need to convey a priority, hierarchy, or sequence between list items. - Use the
colonprop when you want to emphasize list items, especially for short, critical lists. - Use the
Listcomponent when presenting a set of items that need to be displayed in a sequential or hierarchical order. - Utilize the
Listcomponent for menus, navigation bars, or any scenario where content needs to be structured into a list format. - Arrange list items in a logical way. For example, if the list is about resource use, the default order might be highest resource use to lowest. Grouping items in categories into smaller, more specific lists might be more meaningful in some contexts. Alternatively, organize in alphabetical or numeric order.
- Use list items that are grammatically parallel. For example, do not mix passive voice with active voice or declarative sentences (statements) with imperative sentences (direct command).
When not to use
- Do not use lists for content that is not related.
- Avoid using the
unorderedkind for lists where the sequence of items is crucial. - Avoid using the
Listcomponent for non-linear content layouts or when the content does not benefit from a structured list format. - Consider alternative components such as
CardsorTablesfor presenting non-linear or visually rich content. - Generally, lists should be used to present simple pieces of information. For more complex sets of data, consider using a data table.
Accessibility
- Ensure each list item is semantically marked up using appropriate HTML elements such as
<ul>,<ol>, and<li>.