Anatomy
|
Item |
Name |
Description |
Component |
|---|---|---|---|
|
1 |
Card container |
The outer container with predefined visual properties like border-radius, background variants, and optional border. |
- |
|
2 |
Card content |
Area designated for the card content, featuring a Slot and Background variant layer, with options for adjusting padding. |
Card content (building block) |
Specifications and properties
Outline
The default card comes with a border outline to create distinction from the background. When the card is displayed on top of color.background.static.sunken, or when it is used with a background image or color fill, the outline should be disabled.
Border radius
Cards support three border-radius sizes to ensure visual consistency across different layouts.
Choose the appropriate size based on hierarchy, nesting, and overall design cohesion. Check our Usage guidelines for more details.
|
Size |
Value |
Token |
|---|---|---|
|
Small |
8px |
border-radius.100 |
|
Medium (Default) |
16px |
border-radius.200 |
|
Large |
24px |
border-radius.300 |
Variants
We offer four different variants, each serving a specific purpose. When a card is nested inside another one, or it needs extra emphasis, this property allows to set a background fill.
|
Variant |
Description |
Token |
|---|---|---|
|
Default |
Blends with the regular page background, making it ideal for multiple cards without adding visual noise. |
background.static.flat |
|
Subtle |
Uses a light background to create a soft distinction from the surrounding layout. |
background.interactive.neutral.default |
|
Highlighted |
Uses a more prominent color to draw attention to important content. Typically applied when distinguishing one card from others in a group or emphasizing key information. |
background.interactive.secindary.default |
|
Image |
Allows a background image for promotional or branded use cases. |
- |