Short description

List are used to list many datapoints with labels in a structured way. They may be grouped under heading and they may have a link or button added to act on the data being displayed.

When and how to use it

Lists are used when the added functionality of tables is not required. Use lists to present data about one thing, such as account details. Use tables to list many items, such as accounts.

Types of lists

We use a couple of different layout for lists depending on situation:

• Spaced
• Dual column
• Vertical

Spaced

The spaced version left align labels and right aligns all values. This is the most basic version of the list.

Spaced list

Dual column

In this version the labels are still left aligned, but the data is in a column in the center (also left aligned). If there is an action added its presented as a button. If there’s additional information that may be added as a link. The link/button is placed in the right side. Dual column is mostly used to display details in the main content area. It needs a larger space to work well. In a mobile version it behaves exactly like the vertical version.

Dual column

Vertical

If there’s a need for action/link to the items in the list but the space in width is limited the vertical option might be better. In this version both label and value is left aligned and stacked on top of each other, but the link/button is still to the right.

Vertical list

Do's and don'ts

Do

• When needed, use the smaller input fields and buttons within in a table or a list.
• Use buttons for actions
• Use links for linking to other resources

Don't

• Use more than one link/button per item

Examples

List versions in light mode

List versions in dark mode

Example of details of a mortgage in desktop

Example of details of a mortgage in mobile

-

-

• Details: Specification in Figma
• Instruction: How to access Figma