A card serves as a surface for information. It helps organize and highlight information while providing visual hierarchy. Card renders the container and display surfaces; see EditableCard for a card that summarizes saved information the user can edit.
JG
Josh Gachnang
joined 2 years ago
Usage Guidelines
Do
Use a display card to highlight a new feature or flow.
Use a container card to pull longform information into a tidy column, especially on larger screens.
Use EditableCard, which wraps Card, to show a short summary of saved information the user can edit.
Don't
Do not put information for a task or flow on a card. Consider using a modal instead.
Accessibility
If using an image, be sure to provide an appropriate alt tag.
If using a button, be sure to follow all of the relevant accessibility standards found here.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Additional Documentation
NN/g article
Related
Box, EditableCard
Examples
Plain
JG
Josh Gachnang
joined 2 years ago
Display
Display cards feature a colored header, title, description, and an action button to highlight a feature or guide users into a flow.
What's New in Terreno
Discover the latest features in Terreno's design system to build better apps faster.
Quick Start Guide
Follow the setup guide to integrate Terreno into your project in minutes.
Security & Privacy
Your data is protected with end-to-end encryption and regular security audits.
Variants
All card variants side by side.
Container (default)
Container Card
Wraps any content with a card surface. Great for grouping related information.
Display
Display Card
Use display cards to highlight a new feature or guide users into a flow.
LightAndDark
Cards adapt to both light and dark themes.
Light mode
Light Theme
Cards adapt to the active theme automatically.
Dark mode
Dark Theme
Cards adapt to the active theme automatically.
DisplaySizes
Display cards support three sizes. On desktop, large and default lay out horizontally; small is always vertical. On mobile, all sizes use a vertical layout.
Large — horizontal on desktop, vertical on mobile
Mountain Vista
Large cards lay out horizontally on desktop with the image or header on the left.
Default — horizontal on desktop, vertical on mobile
Mountain Vista
Default cards use the same horizontal layout as large on desktop.
Small — always vertical
Mountain Vista
Small cards are always vertical with a fixed-height image area.
WithImage
Display cards support a header image. Pass imageUri to replace the colored header with a full-width cover photo.
Mountain Vista
On desktop, the image sits inside the card's 32px padding. On mobile it is edge-to-edge.
Mountain Vista
On desktop, the image sits inside the card's 32px padding. On mobile it is edge-to-edge.