How they help
Cards promote readability and scanning by breaking down complex data into manageable parts. Additionally, they are flexible and highly adaptable, making them suitable for various screen sizes.
Example of a card
Anatomy
- Hero image: optional visual
- Header
- Body content
- Preview image: optional visual
- Footer: optional call to actions
Visual reference for anatomy
Variants
Some parts of the card have different variants available.
Hero Image
There are multiple hero image variants you can use for your needs: product icon, checkbox and have it be inline.
Hero image variants
Header
There are multiple header variants you can use for your needs: avatar, product icon, image, checkbox and overflow.
Header variants
Footer
The footer allows you to add an overflow icon.
Footer variants
Designer resources