Cards (Features)

Cards are containers that group related information and action
about a single subject.

Variants

This card design for features comes in 2 variants:

Variant Usage

Flippy Card

These are used to represent bite-sized material through an overview side and detailed view side.

Single Card

These are used to represent bite-sized material through a single card.

Anatomy

All feature cards are made up some, if not all of the following:


 

  1. Icon: Represents the type of informaiton in the card through visual affordance. 
  2. Card Title: Provides an overview of the card content. 
  3. Card content: Supporting text content.
  4. Flip Card Button: Action button for user to flip to the other side of card content.

 

Size

Features: Fixed to 282px in width for both desktop and mobile. Stretches across 3 columns within the desktop grid system.

Text Style

Desktop

 

  1. Card Header Title uses a 20px size, in Semibold. Use “Card-Small Header/H4_semibold" text style on Figma.
  2. Card Content uses a 16px size. Use “Body/Main” text style on Figma.

 

Mobile
 
  1. Card Header Title uses a 20px size, in Semibold. Use “Card-Medium Header/H3_semibold” text style on Figma.
  2. Card Content uses a 16px size. Use “Body/Main” text style on Figma.

 

 

Dos and Don'ts

doimage
Ensure that you have at least 2 and up to a maximum of 6 cards when using this type of card.
dontimg
Do not use this design type of card if you only have enough content for 1.