Card
嵌入页面、收纳一组相关内容的方框：黑色标题栏放置标题与操作，其下为正文，页脚以一道暗色细线隔开。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/card示例
附带报酬的委托
Sealed crate
Rail yards → North gate
Rush
Escort the crate through the yards before the night shift. Do not open it.
3,100 cr
import { Badge } from "@/components/zero/badge";import { Button } from "@/components/zero/button";import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/zero/card";import { ArrowRightIcon } from "@/components/zero/icons";export default function CardJob() { return ( <Card className="w-full max-w-sm"> <CardHeader> <CardTitle>Sealed crate</CardTitle> <CardDescription>Rail yards → North gate</CardDescription> <CardAction> <Badge>Rush</Badge> </CardAction> </CardHeader> <CardContent> <p className="text-zero-text-2"> Escort the crate through the yards before the night shift. Do not open it. </p> </CardContent> <CardFooter> <span className="font-semibold tabular-nums">3,100 cr</span> <Button size="sm" className="ms-auto"> Take it <ArrowRightIcon /> </Button> </CardFooter> </Card> );}行为
卡片为直角，与所有高度随内容而定的元素一致。作为第一个子元素的图片会铺满整个宽度，不留边距。不带标题栏的卡片即一个普通方框。
卡片本身是链接，或点击后会打开其他内容时，传入 interactive：指针悬停时，描边变为强调色；卡片内的控件获得焦点时，描边变为焦点框的黄色。
属性
Card
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| rarity | "common" | "uncommon" | "rare" | "epic" | "legendary" | — | 按稀有度档位着色（见 Rarity）。 |
| interactive | boolean | false | 悬停时，或内部元素获得键盘焦点时，描边高亮。 |