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
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.
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.
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.