List
Overview#
A list of this manner displays a collection of resources of the same type, like products or customers, in a manner that emphasizes the individual resources in the list.
A list may also take the form of a selection list, wherein users can interact it in the manner of a checkbox or radio selection.
This documentation does not cover:
- Unordered lists
- Ordered lists
Design Guidelines#
Use when#
As a display element#
- A collection of resources needs to be displayed in a way that puts focus on the individual resource items instead of the collection as a whole.
As a selection element#
- In cases where a checkbox or radio is cumbersome to users and the options available may not visually work with alternative displays, particularly on mobile.
Don't use when#
- Data in resources should be displayed for the purposes of scanning and analysis. See Tables.
Visual Style#
- Each resource must be displayed in blocks arranged vertically.
- Separate each list item with a grey line.
- Individual list items can be formatted as needed to best display the resource data.
- Each list item must format content in an identical manner for the entire list, barring missing content.
- Identify the type of resource, usually with a heading.
Editorial#
- When used as a display element, lists should have more than one data point to display.
- Lists can be paginated, filtered, and searched.
- Lists should be paginated at 50 items.