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.

ExampleContent Type When to use
List ThumbnailThumbnail, 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 ActionImage, 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 TextText, No Action Use it to provide insights to related items.
List Text Action LeftText, Action Left Use it to provide insights to related items, that allow users to execute quick actions, usually selection.
List Text Action RightText, Action Right Use it to provide insights to related items, that allow users to execute quick expandable actions.
List Text Action DoubleText, Action Double Use it to provide insights to related items, that allow users to execute quick expandable and selection actions.