Cards (Standard)

Standard Cards contain content and actions about a group of information.

Variants

Variant Usage

Standard Card with Image

Standard card with an image thumbnail.

Standard Card with Icon

Standard card with an icon.

Standard Card with Icon and Display Text

Standard card with an icon and additional information.

Anatomy

Standard Card with Image/Icon
 

Standard cards are made up of the following:

  1. Card Title
  2. Chevron
  3. Supporting Text
  4. Image/Icon
  5. Container

 

Standard Card with Image/Icon and Display Text
 

Standard cards are made up of the following:

  1. Card Title
  2. Chevron
  3. Display Text
  4. Supporting Text
  5. Image/Icon
  6. Container

 

Size

Standard Card with Image/Icon
 

 

  1. Cards have a fixed width which is capped at 327px (87.2% of the screen).
  2. Cards have an overall padding of 16px.

 

Standard Card with Image/Icon and Display Text

Text Style

  1. Card Title
    • 16px, Primary Grey color.
    • Use “Card Title” text style on Figma.
  2. Supporting text
    • 12px, Inactive Grey color. Use “Label or Note” text style on Figma.
  3. Display text
    • For currency (SGD) use Tag font, inactive grey colour
    • For amount use “Display Small” text style on Figma, Primary grey

Behavior

Standard cards should stack downwards.

Dos and Don'ts

doimage
Keep the supporting text short (within 1 line).
dontimg
Be longwinded.