111k
新建

Card

PreviousNext

显示一个包含标题、内容和页脚的卡片。

Radix UIBase UI
Radix UI
Login to your account
Enter your email below to login to your account
Forgot your password?
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>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</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,

图片

在卡片标题前添加一张图片，就可以创建带图片的卡片。

Event cover
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 {

RTL

要在 shadcn/ui 中启用 RTL 支持，请参见 RTL 配置指南。

تسجيل الدخول إلى حسابك
أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك
نسيت كلمة المرور؟
"use client"

import * as React from "react"

API 参考

Card

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

PropTypeDefault
size"default" | "sm""default"
classNamestring-

CardHeader

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

PropTypeDefault
classNamestring-

CardTitle

CardTitle 组件用于显示卡片标题。

PropTypeDefault
classNamestring-

CardDescription

CardDescription 组件用于显示标题下方的辅助文本。

PropTypeDefault
classNamestring-

CardAction

CardAction 组件会把内容放到标题区域右上角（例如按钮或徽标）。

PropTypeDefault
classNamestring-

CardContent

CardContent 组件用于卡片的主体内容。

PropTypeDefault
classNamestring-

CardFooter

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

PropTypeDefault
classNamestring-