Chlorophyll
Styles
List
The simplest way of listing data in an orderly fashion with labels and associated data.
Available in
React
Javascript
Component meta
Component identifier
- component-list
Design version
- 2018-03-07
Design principles
- Trigger insightAim to explain
Guidelines
Short description
When there is a larger number of entries in the list, they may be grouped under a separate label, creating a group.
When and how to use it
Lists are used when the added functionality of tables are not required.
Behaviour
When there is sufficient space, data is listed to the right of the label, but in smaller containers, such as a slide-out, it may be displayed the same was as done in a mobile device with the label above the data. See examples below.
Do's and don'ts
- When needed, use the smaller input fields and buttons within in a table or a list.
Examples
1. Left-aligned data
When the list is wide, the data (=column to the right) is aligned to the left.
2. Label above data
When the device is smaller, you can place the label above the data, both aligned to the left..
3. Right-aligned data
In this example, when the space for the list is smaller, the data is aligned to the right.
Specification
Specification
The list component inherits measurements from tables in regards to line-heights, colours, etc.
Desktop
Mobile
