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:
- Card Title
- Section Title
- Body Copy
- Notes
- Dot (Separator)
- Chevron
- Activity Alert
- Container
Size
Inbox cards have a padding of 16px and a fixed width capped at 327px (87.2% of screen).
Text Style
- Card Title: Uses “Card Title” text style on Figma
- Primary Grey color
- Section Title
- Use “Body (Emphasis)” text style on Figma
- Primary Grey color
- Body Copy
- Uses “Body” text style on Figma
- Primary Grey color
- Notes
- Use “Label or Note” text style on Figma
- Primary Grey color
- 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
Show 1st section with + 1 activity history by default. Keep copy within 1-2 lines, and do not exceed 3 lines.
Display more than 2 sections.