Card
Bordered surface for grouped content, composed of media, header, content and footer. Interactive cards sharpen their border on hover and press in.
import { Card, CardMedia, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "pleate/card";Variants
elevated
Surface with a hairline edge.
flat
Plain surface, no edge.
filled
Gray fill.
outline
Transparent with an inset border.
raised
Lifted with a large shadow.
Media, footer, interactive
Alfama rooftop flat
4.9Lisbon, Portugal
€128/ night
Interactive card
The whole card is a link: it lifts on hover and presses in.
Use asChild with an anchor or a Next Link.
Open trip →
Tinted with an icon
tint colors the wash, the CardIcon tile and the call to action.
Props
- variant
Surface and shadow.
"elevated" | "flat" | "filled" | "outline" | "raised"default "elevated"- padding
Inner padding; CardMedia bleeds past it.
"none" | "sm" | "md" | "lg"default "md"- radius
Corner radius.
"lg" | "xl" | "2xl" | "3xl"default "2xl"- interactive
Hover lift, press, focus ring (pair with asChild + a link).
boolean