List
Last Updated on Sep 29, 2022
Lists display a series of related read-only content. Lists can be a plain or a decorative way to display data.
Design Principles
- Lists display information more visually than a table, but more plainly than a data visualization.
- All lists optionally have an option to add an icon. The default is without an icon, but can be added if it fits the design. List Callouts have options for icons and to show the trend component. The trend is helpful in visualizing how data has changed over time.
- When using a list with a fixed horizontal heading, set a width that is wide enough for all the headings. This will align content as best as possible.
- Lists are commonly used inside of cards to display data. We have patterns called Widget KPIs or Widget KPI Sets that can be used in a variety of ways.
- Keep the copy in lists as concise as possible. Use shorthand for numbers (ie: K for thousands, etc.) whenever possible. Consult our Writing Guidelines for more information about writing style and preferences.
Do's and Don'ts
Related Components
Icons
Typography