Task Card
Checkable todo row with priority chip and due caption. Done tasks strike through.
Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card5 } from "@/components/beste/component/card5";
<Card5
surface="card"
bordered
task="Review Q2 roadmap with design team"
priority="high"
due="Tomorrow"
duePrefix="Due"
/>Keyboard and gestures
Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover | The card lifts and the image scales inside its frame; `motion-reduce` turns the movement off. |
|---|
Usage
The import and the props worth knowing about, in one place.
import { Card5 } from "@/components/beste/piece/card5";
<Card5
surface="card"
bordered={true}
inverted={false}
task="Review Q2 roadmap with design team"
priority="high"
due="Tomorrow"
duePrefix="Due"
done={false}
/>More Card pieces
View all CardOrder Status
Package icon paired with an order ID, item count, a colored status dot, and an optional ETA.
/v1/payment_intentsAPI Endpoint Card
HTTP method chip paired with a monospace path and a short summary line.
Team Member
Directory row with an avatar carrying a presence dot, name, title, department, and a message button.
Featured Tier
Highlighted plan with a gradient border, Most popular badge on top, and a filled gradient CTA button.
