Key Points
- Cards can either:
- Contain other UI components
- Show a snapshot that links to detailed content
- Place cards at two elevations: nested and raised (this will be deprecated in 2026)
- Shadow and border properties vary based on elevation
- Cards follow the structural guidelines
- Cards are not clickable; use tiles for clickable containers
- Unlike tiles, cards are static and have no states
Usage
Containers
Cards can also be used to contain nested elements, too many to show examples of. Before using a card, consider whether the user interface can be displayed on the default surface or if spacing is used to create collections or a hierarchy.
Snapshots
Cards commonly contain snapshots that link to detailed content. Snapshots can include multiple actions and supporting media and content, all of which appear in the overview.
Layout of cards, simple on the left and with media on the right