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:
- Card Title
- Chevron
- Supporting Text
- Image/Icon
- Container
Standard Card with Image/Icon and Display Text
Standard cards are made up of the following:
- Card Title
- Chevron
- Display Text
- Supporting Text
- Image/Icon
- Container
Size
Standard Card with Image/Icon
- Cards have a fixed width which is capped at 327px (87.2% of the screen).
- Cards have an overall padding of 16px.
Standard Card with Image/Icon and Display Text
Text Style
- Card Title
- 16px, Primary Grey color.
- Use “Card Title” text style on Figma.
- Supporting text
- 12px, Inactive Grey color. Use “Label or Note” text style on Figma.
- 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
Keep the supporting text short (within 1 line).
Be longwinded.