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


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 Content Area

You can put most anything you need in the card content area 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.


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


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.


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