Card is a container that groups related content.


There are 2 different types of card — Small and large.

Small card
Small card

Designed for more compact component, and has a smaller border radius and padding to match. It has a min height of 88px and max of 300px.

Large card
Large card

Used to highlight and group content that need stronger hierarchy in an experience. It has a min height of 300px.

When to use

The card component is ideal for highlighting content whilst still keeping structure. It is primarily used for promotions or conveying crucial information.

It's also useful for presenting related details about a specific topic.

  • Use multiple cards as part of a heterogeneous collection to display a variety of content types at the same time on the same page.
  • Don’t use cards for listed content or components.

Multiple cards working in harmony

Use multiple cards as part of a heterogeneous collection to display a variety of content types at the same time on the same page.

Cards being used for contact information

Don’t use cards for listed content or components.

Small card

Use to display related information on a single subject.

Small cards — balance card, alert and nudge

We use small card for our balance cards, alerts and nudges.

Large card

Large cards are best suited for situations where you need to clearly highlight content, like in the case of promotions.

Promo card

We use large card in our promo card component.

Best practices

Utilise cards for presenting both content and actions related to a specific topic. Ensure that cards are designed for effortless scanning of pertinent and actionable details.

Arrange elements such as text and images on the cards in a manner that effectively communicates their hierarchy.

Promo card in default state

Cards can function as entry points into deeper layer of information or navigation.

Card used on existing components

Don’t use cards on existing standalone components, 
e.g. navigation option, or form elements.

  • Cards can be showcased collectively in a grid, vertical list, or carousel format.
  • Can be positioned at the top, middle or bottom of a screen paired with a heading.
  • Don’t place in a carousel if the cards have different height values.

Balance cards

Can be placed together in a carousel, grid or vertical list.

Cards next to related text or images

Don’t place them next to related text or images.


The card component has optional states based on if the card is clickable or static. As well as buttons and dismiss icons.

Card states
Card — action alert

Cards can include action buttons.

Card — nudge

Cards can include links as part of supporting text.

Card with cross for dismiss

Cards have an option to be dismiss.

Card — button accessories

Large card includes footer accessories that promote 


The card component scales in height with scaled text.

Card with dynamic type

Long texts or accessibly scaled text can run over 2 lines

Card with image over text

Your scaled text should never fall behind your image.




Developer documentation