List
Also known as: List group, Menu list
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | Sm | Md | Lg | Xl | 2Xl | Md |
Has start item Boolean | true | false | true |
Start item InstanceSwap | Icon | Checkbox | Radio | Asset | Icon |
Label Text | string | Label |
Has end item Boolean | true | false | false |
End item InstanceSwap | Icon | Checkbox | Radio | Asset | Icon |
When to use
Use for structured lists, such as settings, navigation menus and dropdowns.
Sort lists in a logical way to help users scan the content, such as alphabetical, numerical, chronological order.
Use icons, images and text in a consistent pattern.
Don't overload the list with elements if the clarity suffers.
Don't use for dense data, consider using table instead.
Behaviour
Lists display a collection of related list items in a vertical stack, used heavily to provide information structure and readability. By default, lists display static information, but list items can be configured to be interactive:
- Static display: Simple information presentation for consumption (feature lists or contact details).
- Interactive lists: Lists can allow for user interaction, including selection (single or multiple) and reordering (drag-and-drop).
- Dynamic loading: For very long lists, items might load dynamically as the user scrolls, improving page load performance.
Size
Dimensions of the list item are tied to the global scale tokens. This ensures that the components with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
--scale-height-<size>
--scale-gap-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>