Card
A surface that groups a title, content and actions into one tidy block.
Usage
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@vitnode/core/components/ui/card'<Card>
<CardHeader>
<CardTitle>Weekly digest</CardTitle>
<CardDescription>Sent every Monday at 9:00</CardDescription>
</CardHeader>
<CardContent>A roundup of the top threads.</CardContent>
<CardFooter>
<Button variant="outline">Preview email</Button>
</CardFooter>
</Card>CardFooter has a top border and a soft background, so it always reads as the
"what now?" part. An img as the first or last child goes edge to edge with
rounded corners.
Size
size="sm" drops the spacing from 24px to 16px and shrinks the title. Use it in
dense grids and sidebars.
<Card size="sm">...</Card>Header with border
Add border-b to CardHeader and it gets matching bottom padding.
<CardHeader className="border-b">...</CardHeader>Header and footer
A bordered header plus the footer splits the card into three parts.
Border separation
Drop the card padding and let the content draw the lines. CardAction keeps a
header button on the end side.
<Card className="gap-0 p-0">
<CardHeader className="items-center px-4 py-2">
<CardTitle>Reports</CardTitle>
<CardAction>
<Button size="sm" variant="outline">
Filter
</Button>
</CardAction>
</CardHeader>
<CardContent className="border-y px-4 py-3">...</CardContent>
<CardFooter className="border-none px-4 py-3">...</CardFooter>
</Card>With a link
A slim footer is a good home for a "read more" link.
<CardFooter className="py-2">
<a className={cn(buttonVariants({ variant: 'link' }), 'px-0')} href="/guide">
Read the guide
</a>
</CardFooter>Props
All parts take regular div props.
Card
Prop
Type