System
Cards / Elevated surfaces for grouped content.
Sizes
The sizeprop scales the card's rhythm without changing its anatomy: default and sm step the section gap (24 to 16px) and the title (16 to 14px). Content is held identical here so only the size differs.
size="default"
Notifications
Choose what you hear about.
size="sm"
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.