System
Cards / Elevated surfaces for grouped content.
Variants
The variant prop switches the surface: default is a plain fill, dotgrid paints a faint dot grid behind the content for staging placement demos.
variant="default"
Notifications
Choose what you hear about.
variant="dotgrid"
Notifications
Choose what you hear about.
Header and Footer Rows
Add border-b to CardHeader (or border-t to CardFooter) to split it off as a divided row, separated from the body by a hairline. Each row pads itself off the divider, so the header, content, and footer read as three distinct bands.
Notifications
Choose what you hear about.
A divided header sets the card apart from a plain title block: the hairline gives the head its own register, so the body below reads as content, not more heading.
With Blurred Image
A FadeImage nested at the top of a card. Pass backgroundColor="var(--card)" so the image fades into the card surface, then pull the title up into the lower edge of the image.
Nested blurred image
The blur and fade scale with the frame, and the fade resolves to the card color so the transition from image to content stays seamless.