Cards (Inbox)

Inbox Cards contains a group of relevant content.

Variants

Variant Usage

Inbox Card

Used to display inbox content within one single card, where content are further separated by a separator

Anatomy

Inbox cards are made up of the following:

  1. Card Title
  2. Section Title
  3. Body Copy
  4. Notes
  5. Dot (Separator)
  6. Chevron
  7. Activity Alert
  8. Container

Size

Inbox cards have a padding of 16px and a fixed width capped at 327px (87.2% of screen).

Text Style

 

  1. Card Title: Uses “Card Title” text style on Figma
    • Primary Grey color
  2. Section Title
    • Use “Body (Emphasis)” text style on Figma
    • Primary Grey color
  3. Body Copy
    • Uses “Body” text style on Figma
    • Primary Grey color
  4. Notes
    • Use “Label or Note” text style on Figma
    • Primary Grey color
  5. Activity Alert
    • Use “Body (Emphasis)” text style on Figma
    • Singlife Red color

 

Behavior

Summary cards should stack downwards. Show one section by default.
2nd section to reflect status process/progress relating to 1st section.

Dos and Don'ts

doimage
Show 1st section with + 1 activity history by default. Keep copy within 1-2 lines, and do not exceed 3 lines.
dontimg
Display more than 2 sections.