Card
A bordered container for grouping related content.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardMedia,
CardTitle,
CardVariant,
} from "@wunderui/react"Examples
Style
Default is outlined with a soft shadow, elevated drops the outline for a stronger shadow, outlined keeps only the line — for cards that sit on a colored surface.
With an image
A 160 px media area flush with the top of the card — pass an image to fill it, or leave it empty for the placeholder.
With an icon
A tinted icon tile above the title — for feature teasers and settings sections.
With actions
Content above, actions in a footer divided by a hairline — the shape of confirmations.
With a form
Fields in the body, the primary action and its alternative in the footer.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Profile card compact
A centred profile with avatar, role badges and two actions.
Profile card with stats
A cover gradient, the avatar overlapping it, a short bio, three numbers and one action.
Profile card / Team member row
One row per person: avatar or initials, name and role, presence and a message button.
Invitation card for login screen
Who invites, which workspace, accept or decline, and a way out if it is the wrong account.
Project card (image + action)
A card with a cover image and an action in the footer.
Feature teaser (icon)
A card that leads with an icon to introduce a feature.
Confirm dialog (buttons)
A card that asks for confirmation with two buttons.
Sign-in card (inputs)
A card with a small sign-in form.