卡片

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

Enter your email below to login to your account

import { Button } from "@/components/ui/button"
import {
  Card,

安装


pnpm dlx shadcn@latest add card

使用方法

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>卡片标题</CardTitle>
    <CardDescription>卡片描述</CardDescription>
    <CardAction>卡片操作</CardAction>
  </CardHeader>
  <CardContent>
    <p>卡片内容</p>
  </CardContent>
  <CardFooter>
    <p>卡片页脚</p>
  </CardFooter>
</Card>

示例

尺寸

使用 size="sm" 属性将卡片尺寸设置为小。小尺寸变体使用更小的间距。

Small Card

This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

import { Button } from "@/components/ui/button"
import {
  Card,

图片

在卡片标题之前添加图片以创建带有图片的卡片。

Featured

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {

API 参考

Card

Card 组件是卡片内容的根容器。

属性	类型	默认值
`size`	`"default" \| "sm"`	`"default"`
`className`	`string`	-

CardHeader

CardHeader 组件用于标题、描述和可选操作。

属性	类型	默认值
`className`	`string`	-

CardTitle

CardTitle 组件用于卡片标题。

属性	类型	默认值
`className`	`string`	-

CardDescription

CardDescription 组件用于标题下的辅助文字。

属性	类型	默认值
`className`	`string`	-

CardAction

CardAction 组件将内容放置在标题的右上角（例如按钮或徽章）。

属性	类型	默认值
`className`	`string`	-

CardContent

CardContent 组件用于卡片的主要内容区域。

属性	类型	默认值
`className`	`string`	-

CardFooter

CardFooter 组件用于卡片底部的操作和次要内容。

属性	类型	默认值
`className`	`string`	-

日历 Calendar Carousel

安装使用方法示例尺寸图片 API 参考 Card CardHeader CardTitle CardDescription CardAction CardContent CardFooter