Best practices
The DataList component is a set of generalised design patterns meant for key/value pair sets of data.
Both list components can be used for both desktop and mobile designs. Also consider combinations for cases where e.g. a “stacked” layout on mobile switches to a “side-by-side” layout on desktop.
When to use
- Use for price related key/value pairs - e.g. e-commerce basket summary.
- Use as a description list for product features.
When not to use
- Don’t use for read-only data instead of form fields.
Anatomy
- Title
- Text value
- Divider (optional)
Variants
Stacked
Great for listing product data and details.
Side-by-side
Great way to summarise data.
