List component definition
Lists are vertical groupings of related content. List items begin with either a number or a bullet.
list
13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
List variants
The list component has two variants: unordered list (used to display items of equal importance without a specific order) and ordered list (used to indicate a clear sequence or hierarchy, often used for instructions).
When to use lists
Use lists to display a simple, related set of items and to provide structure and clarity in the content.
When not to use lists
Avoid using a list for complex data or when advanced features like sorting, filtering, or selection are required. If the content requires multiple columns and rows within a component, consider using a data table instead. If a basic hierarchy with tables or dividers is required, use the structured list or contained list components instead.
List anatomy
Both unordered and ordered lists are comprised of a marker and a list item. Unordered lists have level 1 items marked with en dashes and level 2 items marked with squares. Ordered lists have level 1 items marked with numbers and level 2 items marked with letters.
List type sizes
The list is available in two type sizes: productive and expressive. The productive list utilizes body-01, while the expressive list uses body-02. The productive list is best suited for functional, task-oriented experiences, whereas the expressive list is designed for more visual, engaging experiences. In most product designs, the productive list will likely be the preferred choice.
List alignment
Lists are typically presented in a vertical format to maintain readability and clarity. Avoid placing individual list items horizontally, as it disrupts grid alignment and reduces readability. However, separate list groups can be placed side by side if they align with grid columns.
Number alignment in ordered lists
For ordered lists with two-digit (10+) or more digit items, align numbers either left or right to maintain a clear structure without misalignment. By default, numbers are left-aligned, but there is an option to switch between the two.
Nested list items
Lists can include nested items to indicate hierarchy or subcategories, with indentation distinguishing each level.
List marker placement
Markers should be top-aligned with the first list item for clarity and consistency. List markers should align flush with the grid and not hang into the grid gutters.
List item content guidelines
List items should be concise, aligning with grid columns to maintain a structured layout. Avoid overly long sentences; if content exceeds the available space, it should wrap to multiple lines rather than forcing excessive width. Text in a list should wrap below the marker, keeping it top-aligned with the first list item to ensure readability. Truncation should be avoided and text should instead wrap to multiple lines. Ensure list items are grammatically parallel by maintaining consistent sentence structures, such as avoiding mixing passive and active voice.
Unordered list definition
Unordered list is a collection of items presented without a specific order. Each list item begins with an en dash, making it ideal for non-sequential content.
Ordered list definition
Ordered list is a collection of items presented in sequence. List items begin with a number, indicating their position, making it suitable for sequential content.