Cards
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.
Live Preview
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| borderRadius | string | 12px | 12px | 12px |
| backgroundColor | color | #FFFFFF | #FFFFFF | #FFFFFF |
| elevation (shadow) | shadow | 0 1px 3px rgba(0,0,0,0.12) | 0 4px 6px rgba(0,0,0,0.1) | 0 4px 6px rgba(0,0,0,0.1) |
| padding | string | 16px | 16px | 16px |
| outlineColor | color | #CAC4D0 | #999999 (40%) | #8A8A8A (40%) |
| containerColor (filled) | color | #E7E0EC | #FFF9EE | #FFFFFF |
Card Variants
- Elevated - Uses shadow to create depth and visual hierarchy
- Filled - Uses a background color that contrasts with the surface
- Outlined - Uses a subtle border for minimal visual weight
Usage Guidelines
- Cards contain content and actions about a single subject
- Use elevated cards for primary content that needs emphasis
- Use outlined cards when multiple cards appear together to reduce visual noise
- Cards can include images, text, buttons, and other elements
- Keep card content scannable and focused on a single topic