Skip to main content

Lists

Lists are made of list items. A list can be used to display content related to a single subject.

Overview

List items can contain actions represented by icons.

Lists act like buttons, that means by default they react to the push action of the index finger of users.

They can encompass two outcomes, which can exclusively be combined through a pre-command, usually a button, that would toggle the two default interactions, namely:

  • Open: access relevant information
  • Select: mark list item(s) for further action (e.g., delete)

Usage

Use when

  • Creating vertical navigation.
  • Displaying options within a menu.
  • List items are especially suitable for text and data, through a layout that is easy to scan and read.

Don’t use when

  • Variable, graphic-heavy items should be better displayed through cards.
  • Displaying multiple parameter data. Consider creating a table for this purpose.

Types

Lists are qualified by content type.

Example Content Type When to use
List Thumbnail Thumbnail, No Action Use it to provide previews of content better understandable through images (i.e., JPG, 3D-models, etc.), that allow users to determine actions required on a glimpse.
List Thumbnail Action Image, Action Right Use it to provide previews of content better understandable through images (i.e., JPG, 3D-model), that allow users to execute quick expandable actions required on a glimpse.
List Text Text, No Action Use it to provide insights to related items.
List Text Action Left Text, Action Left Use it to provide insights to related items, that allow users to execute quick actions, usually selection.
List Text Action Right Text, Action Right Use it to provide insights to related items, that allow users to execute quick expandable actions.
List Text Action Double Text, Action Double Use it to provide insights to related items, that allow users to execute quick expandable and selection actions.
Last updated November 27, 2023.