Card
Displays a card with header, content, and footer.
Create project
Deploy your new project in one-click.
Installation
bash
npx shadcn-vue@latest add card
Usage
vue
<script setup lang="ts">
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card'
</script>
<template>
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
Card Content
</CardContent>
<CardFooter>
Card Footer
</CardFooter>
</Card>
</template>
Examples
Notifications
You have 3 unread messages.
Push Notifications
Send notifications to device.
Your call has been confirmed.
1 hour ago
You have a new message!
1 hour ago
Your subscription is expiring soon!
2 hours ago