Card

A flexible container component for grouping related content into a distinct visual surface, composed with CardHeader, CardContent, and CardFooter.

Installation

npx dafink-ui add card

Demo

Project summary

Everything is on track for the Q3 launch. Three tasks remain open.

Composition

<Card>
<CardHeader />
<CardContent />
<CardFooter />
</Card>

Props

NameTypeDefaultDescription
variant"default" | "elevated" | "outline""default"Visual style of the card surface.
classNamestring""Additional Tailwind classes merged onto the root div.

Accessibility

Card, CardHeader, CardContent, and CardFooter all render plain <div>s with no ARIA role. The interactive prop only changes hover/focus-visible styling (lift, shadow, ring) and adds cursor-pointer — it does not add tabIndex, a role, or a keyboard handler, so a clickable Card is not keyboard-reachable unless the consumer adds those themselves (or places a real button/link inside instead).