Card
Preview
Small (vertical only)
Medium
Large
A card is a container that holds information and actions related to a single concept or object, like a document or a contact.
Cards can give information prominence and create predictable patterns. While they’re very flexible, it’s important to use them consistently for particular use cases across experiences.
Recently viewed
FY24 Team Charter
You recently opened this
1:1 Sam • Niala recap
You recently opened this
Marketing Budget Q4
You opened this yesterday
FY24 Team Charter
You recently opened this
FY24 Team Charter
You recently opened this
FY24 Team Charter
You recently opened this
Copy me
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
Card (Medium size example)
Rest
Hover
Pressed
Selected
Filled default
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
Filled alt
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
Outline
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
Subtle
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT
SWAP WITH CONTENT COMPONENT