Card
We use cards to display information that is grouped together. Cards may contain rich media, text, buttons, and other functionality.
Demo and Developer GuidelinesAnatomy
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.
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
