卡片

显示带有标题、内容和页脚的卡片。

创建项目

一键部署您的新项目。

安装 ​

bash
npx shadcn-vue@latest add card

使用 ​

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>

示例 ​

通知

您有 3 条未读消息。

推送通知

向设备发送通知。

您的呼叫已确认。

1 小时前

您有一条新消息！

1 小时前

您的订阅即将到期！

2 小时前

在 GitHub 上编辑此页面