Card

We use cards to display information that is grouped together. Cards may contain rich media, text, buttons, and other functionality.
Demo and Developer GuidelinesFigma Component

Anatomy

Card Container

The card container can be any height and width depending on your use case, and the card will have different shadow depth depending on whether users can interact with the card container or not.

Card Body

All cards have content, and the card body is where it’s housed. You can put most anything you need in the card body to fit your use case, but all components included in the card must follow the best practices for that component. For example, if you include a link, be sure to reference Links.

Types

We visually differentiate between static and interactive cards by the shadow depth.

Static

Static cards are used to display information that is grouped together, but when the card component itself is not clickable. However, elements in the card like a link or a button can be interactive.

Interactive

We use interactive cards when the whole card is clickable. Do not include interactive elements like buttons or links in the card.

Specifications