文档
卡片
卡片
显示带有标题、内容和页脚的卡片。
创建项目
一键部署你的新项目。
安装
pnpm dlx shadcn@latest add card
用法
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>
示例
通知
您有 3 条未读消息。
推送通知
发送通知到设备。
您的通话已确认。
1 小时前
您有新消息!
1 小时前
您的订阅即将到期!
2 小时前
更新日志
2024-03-11 标题和描述的无障碍性改进
- 更改了
CardTitle
和CardDescription
组件,使用div
代替h3
和p
以提高可访问性。
card.tsx
const CardTitle = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("font-semibold leading-none tracking-tight", className)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"