Overview

Card

Cards present bite-sized information about a topic or product by organising text, image, icon, or other elements in a snackable way. They serve as an entry point to more detailed pages, and could also offer call-to-actions for related task flows.

Card

Usage

When to use
Use cards to provide a brief summary of content or task, or to link to more details or related task flows. Put cards with the same layout together in a group to show a collection of content. Being a flexible container, card content can be customised depending on your context, therefore supporting a wide range of use cases.
Content card
Use content cards when presenting news articles, press releases, blogs, or other types of reading material. We have 2 types of content cards, default and flat. Use the flat version to reduce prominence and maintain visual balance with other interface elements.
Engagement card
Engagement cards are best used as entry points to new features or relevant journeys. These cards use prominent colours and customised illustrations to attract attention and drive actions.
Product card
Best used for presenting information about a product.
Policy card
Best used for presenting more detailed information about a purchased policy. It contains an action button that's commonly used for payment.
Claim card
Best used for showing information related to a single claim. Customise the content to show a status and other relevant details.
How best to use
Caution
Use different types of cards together carefully. Try not to mix too many different types of cards together as it may cause confusion.
Don't
Don't overload a card with too much content. Cards should provide a succinct summary about a single topic, with a linked entry point to more details.
Do
Keep the number of rows to a maximum of 6 in a claim card, so that users get the most crucial information upfront.
Don't
Don't put more than one status indicators in a card to avoid confusion.
When not to use
Don't use when the content doesn't link to more details
Cards are selectable and will link to a different flow or page. If the content is a static description, use other design patterns instead.