Card
Cards group related content and actions into a single container. They come in three visual styles and support optional header, footer, and cover image sections.
Variants
Use flat for low-emphasis content, elevated as the default, and outlined for a bordered style without shadow.
Flat
A quiet surface for low-emphasis content.
Elevated
The default style with shadow and border.
Outlined
A bordered card without shadow.
With header and footer
Pass header and footer props to add structured sections above and below the card body.
Last watered 3 days ago. Next watering due in 4 days. Placed in the east-facing greenhouse bay.
With cover image
Use the cover prop for an image or visual at the top of the card. The cover always spans the full width.
Recently propagated. Requires bright indirect light and weekly watering.
Interactive
Add onClick or href to make the entire card clickable. Interactive cards lift on hover to signal they are actionable.
Usage
Use variant to control the visual style. Pass header and footer as props to add structured sections. Use cover for an image or visual at the top. Add onClick or href to make the entire card interactive.
Explore the Card component by adjusting its properties below. Changes are reflected in the live preview and code snippet in real time.
Last watered 3 days ago. Next watering due in 4 days.
Properties
<Card> Card content goes here. </Card>