Quartz UI正在打磨
中文English planned
显示设置 / Display preferences
65 + 8
展示组件版本 0.1.0

Card 卡片

把同一主题的标题、说明与操作组织在有边界的内容容器中。

使用概览

适合使用

  • 仪表盘或集合页需要分隔多个独立信息单元时。

不建议使用

  • 内容本身已处于明确分区，额外容器只会增加视觉层级时。

真实示例

指标内容卡

将一个指标的名称与当前值组织在一起。

正在加载示例…

安装

本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/card.json

基础用法

导入

import { Card, CardHeader, CardTitle, CardContent } from "@richardqiu/quartz/card";

JSX

<Card><CardHeader><CardTitle>本月用量</CardTitle></CardHeader><CardContent>8,420 次请求</CardContent></Card>

状态与控制摘要

默认
title · textdescription · text

API 参考

属性类型默认值说明
classNamestring未设置为卡片容器补充布局类而不改变内部结构语义。

组合结构

  1. 01Card
  2. 02CardHeader
  3. 03CardTitle
  4. 04CardDescription
  5. 05CardContent
  6. 06CardFooter

键盘约定

  • Card 本身不增加键盘行为，内部交互元素保留原生键盘约定。

可访问性契约

  • Card 默认是非交互容器，不会自动获得焦点或按钮角色。
  • CardTitle 应根据页面层级使用合适的标题元素或 heading 角色。