Overview

Purpose

The Card is a flexible-sized container. It resembles a playing card and is intended to display content and encourage users to click/tap to view more details. Cards can serve as entry points into deeper levels of detail or navigation.

Anatomy

The Card component can be broken down into the following elements -

1. Content Area
   The card provides a container for customised content.

2. Trim (optional)
   A coloured line can be used to tie in a product’s branding.

Variants & States

• State: Default, Hover, Focus
  
• Selectable: yes/no
  
• Selected: yes/no
  
• Trim: on/off