Lists

Lists display a series of related content in a vertical format.

Variants

Bullet Lists
Tick Lists
Variant Usage

Bullet Lists

These can be used to help users skim information, group related content, show an order of steps or arrange information by their importance.

Tick Lists

These are used to represent information in the form of a check list, where information in the group fulfills a set of conditions.

Anatomy & Sizes

All lists are made up of the following:

  1. Marker: Could either be in Bullet form, or Tick form.
  2. Primary Item: Top layer item label.
  3. Secondary Item: Nested item label.

 

Bullet Lists
Tick Lists

Size

  1. Desktop: 4 columns within the desktop grid system. Height is variable, according to the length of the content.
  2. Mobile: Stretches from grid to grid within mobile grid system. Height is variable, according to the length of the content.

Text Style

Lists comprises of text for the primary item and the secondary item.

  1. For primary item, text size is at 20px. Use “Card-Medium Header/h3_semibold” text style on Figma.
  2. For secondary item, text size is at 16px. For secondary item, use “Body Main” text style on Figma.

 

Dos and Don'ts

doimage
Use only one type of marker for a single list.
dontimg
Mix bullet markers within the same lists.