Card

显示包含头部、内容区域和底部的卡片组件。

Create project

Deploy your new project in one-click.

安装 ​

pnpm dlx 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>卡片标题</CardTitle>
      <CardDescription>卡片描述</CardDescription>
    </CardHeader>
    <CardContent>
      卡片内容
    </CardContent>
    <CardFooter>
      卡片底部
    </CardFooter>
  </Card>
</template>

示例 ​

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

Edit this page on GitHub