LAYOUT / COMPONENTS
Card
Group related content and actions.
About card
A card serves as a container to visually distinguish pieces of content, commonly employed in multiples to enhance scannability and organize information effectively.
Anatomy
Shared parts, named consistently.
A place for your ideas
Build a shared language for every product your team creates.
- 1TitleHeader
The Card’s header
- 2TitleExpand/collapse
Optional control for accordion functionality
- 3TitleTitle
Title which describes the Card content
- 4TitleSubtitle
Optional subtitle which describes the Card content
- 5TitleContainerRequired
Main content body for elements
- 6TitleDividerRequired
Dividers in cards mark sections or show expandable areas, aiding organization. (Visible only when the card expands.)
Try the default
A working example with the shared V1 visual language.
A place for your ideas
Build a shared language for every product your team creates.
When to use
Group content around one subject. Give the card a heading and make each action explicit; avoid nested interactive containers.
Only links and buttons inside the card enter the keyboard sequence.