Card 卡片
新粗野主义风格的卡片容器，支持 6 种变体和可组合的子组件，用于结构化内容展示。
预览
Preview
默认
卡片标题
卡片描述信息。
这是卡片内容区域，可以放置文本、图片或其他组件。
变体
默认
标准阴影
提升
更大阴影
扁平
无阴影
交互式
悬停查看效果
主要
主要颜色边框和阴影
次要
次要颜色边框和阴影
内边距
内边距: 无
内边距: 小
内边距: 默认
内边距: 大
纹理与装饰（texture / deco）
蓝图网格 + HUD 准星
点阵纹理
安装
pnpm dlx brutx-vue@latest add card用法
vue
<script setup>
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from 'brutx-ui-vue'
</script>
<template>
<Card variant="default">
<CardHeader>
<CardTitle>Payment Method</CardTitle>
<CardDescription>Add a new payment method to your account.</CardDescription>
</CardHeader>
<CardContent>
<p>Card content goes here.</p>
</CardContent>
<CardFooter>
<Button variant="primary">Save</Button>
</CardFooter>
</Card>
</template>变体
| 变体 | 说明 |
|---|---|
default | 标准阴影 |
elevated | 大阴影，用于强调 |
flat | 无阴影 |
interactive | 阴影加悬停上浮效果和手型光标 |
primary | Primary 色阴影和边框 |
secondary | Secondary 色阴影和边框 |
纹理与装饰
texture 提供背景网点/网格纹理，deco 提供 HUD 装饰层，两者可与任意变体叠加：
| 属性 | 值 | 说明 |
|---|---|---|
texture | none / grid / dots | 背景纹理：蓝图网格 / 点阵（走 background-image，不与背景色冲突） |
deco | none / hud | 四角十字准星装饰层（伪元素承载，工业仪器标定感） |
vue
<template>
<Card variant="interactive" texture="grid" deco="hud">
<CardTitle>HUD 监控面板</CardTitle>
</Card>
</template>内边距
| 内边距 | 值 |
|---|---|
none | p-0 |
sm | p-3 |
default | p-5 |
lg | p-8 |
模板组合
新卡片模板建议直接组合 Card 子组件。
文章卡片
vue
<Card variant="interactive" padding="none">
<CardHeader>
<Badge variant="accent" size="sm">Vue 3</Badge>
<CardTitle>Getting Started with BrutxUI</CardTitle>
<CardDescription>Build bold interfaces with composable primitives.</CardDescription>
</CardHeader>
<CardFooter>
<Button variant="link">阅读更多</Button>
</CardFooter>
</Card>文件卡片
vue
<Card>
<CardHeader>
<CardTitle>report-2026.pdf</CardTitle>
<CardDescription>PDF · 3.2 MB</CardDescription>
</CardHeader>
<CardFooter>
<Button variant="outline" size="sm">下载</Button>
</CardFooter>
</Card>评价卡片
vue
<Card variant="elevated">
<CardContent>
<p class="font-bold">“这款产品彻底改变了我们的工作流程。”</p>
</CardContent>
<CardFooter>
<span class="text-sm font-black">张明 · 产品经理</span>
</CardFooter>
</Card>子组件
| 组件 | 说明 |
|---|---|
Card | 根容器，支持 variant 和 padding 属性 |
CardHeader | 头部区域，带底部内边距 |
CardTitle | 标题文本，加粗且带字间距 |
CardDescription | 柔和的描述文本 |
CardContent | 主内容区域 |
CardFooter | 底部区域，弹性布局 |
API 参考
Card
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | "accent-subtle" | "default" | "destructive-subtle" | "elevated" | "flat" | "info-subtle" | "interactive" | "primary-subtle" | "primary" | "secondary-subtle" | "secondary" | "success-subtle" | undefined | "default" | 控制卡片的配色、阴影或交互外观； interactive 变体也会启用可交互语义。 |
详情声明类型NonNullable<"flat" | "default" | "interactive" | "primary" | "secondary" | "primary-subtle" | "secondary-subtle" | "success-subtle" | "info-subtle" | "accent-subtle" | "elevated" | "destructive-subtle" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/card/Card.vue | |||
padding | "default" | "lg" | "none" | "sm" | undefined | "default" | 卡片内容区域的内边距预设。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | "none" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/card/Card.vue | |||
texture | "dots" | "grid" | "none" | undefined | undefined | 叠加到卡片底色上的背景纹理，可选蓝图网格或半色调点阵。 |
详情声明类型NonNullable<"none" | "grid" | "dots" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/card/Card.vue | |||
deco | "hud" | "none" | undefined | undefined | 可选的 HUD 四角准星装饰层，仅用于视觉展示。 |
详情声明类型NonNullable<"none" | "hud" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/card/Card.vue | |||
interactive | boolean | undefined | false | 让卡片响应点击和 Enter/Space，并添加 button 角色及键盘焦点。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/card/Card.vue | |||
disabled | boolean | undefined | false | 禁用可交互卡片的焦点和激活行为，并设置 aria-disabled。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/card/Card.vue | |||
class | string | undefined | undefined | 追加到卡片根容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/card/Card.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@activate | [event: Event] | 可交互卡片被主键点击、Enter 或 Space 激活时发出原生事件；禁用时以及事件来自内部交互元素时不发出。 |
详情声明类型[event: Event] 来源packages/ui/src/components/card/Card.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 卡片主体内容，通常组合 CardHeader、CardContent 和 CardFooter。 |
详情声明类型{}来源packages/ui/src/components/card/Card.vue | ||
CardContent
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | — | 追加到卡片主内容区域的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/card/CardContent.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 渲染在主内容区域中的卡片正文。 |
详情声明类型{}来源packages/ui/src/components/card/CardContent.vue | ||
CardDescription
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | — | 追加到描述文本元素的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/card/CardDescription.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 卡片的补充说明文本。 |
详情声明类型{}来源packages/ui/src/components/card/CardDescription.vue | ||
CardHeader
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
class | string | undefined | — | 追加到卡片头部区域的 CSS 类。 |
详情 | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 卡片头部内容，通常包含标题和描述。 |
详情声明类型{}来源packages/ui/src/components/card/CardHeader.vue | ||
CardTitle
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
as | "h2" | "h3" | "h5" | "h1" | "h4" | "h6" | undefined | "h3" | 选择标题渲染为 h1 至 h6 中的哪个 HTML 标题元素。 |
详情声明类型"h2" | "h3" | "h5" | "h1" | "h4" | "h6" | undefined 字面量
默认值详情
来源packages/ui/src/components/card/CardTitle.vue | |||
class | string | undefined | undefined | 追加到标题元素的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/card/CardTitle.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 卡片标题文本或内联标题内容。 |
详情声明类型{}来源packages/ui/src/components/card/CardTitle.vue | ||
可访问性
- 语义化结构：
CardTitle默认渲染为h3标题元素，可通过as属性自定义为合适的标题层级 - 交互反馈：
interactive变体提供悬停效果，建议配合键盘焦点样式使用 - 可点击卡片：设置
interactive属性（或使用variant="interactive"）后，卡片会添加role="button"和tabindex="0"，支持 Enter/Space 键触发activate事件（派发原生事件参数） - 禁用状态：
interactive卡片设置disabled后不可聚焦（tabindex="-1"）并标记aria-disabled="true"，点击与键盘均不再触发activate；视觉上不再应用手型光标与悬停/按压交互样式，与可交互卡片区分 - 嵌套交互元素：卡片内部若包含按钮/链接等交互元素，点击或在其上按 Enter/Space 键均不会触发卡片
activate（与 onClick 行为一致，避免"子元素动作 + 卡片激活"双重触发）；同时应避免在interactive卡片内再嵌套交互元素，以免形成无效 ARIA 嵌套 - 内容组织：通过
CardHeader、CardContent、CardFooter子组件提供清晰的内容结构，便于辅助技术理解页面布局
可点击卡片
通过 interactive 属性将卡片变为可点击元素，自动添加手型光标和悬停提升效果：
vue
<script setup>
import { Card, CardContent, CardTitle } from 'brutx-ui-vue'
function handleClick(event) {
console.log('Card activated!', event)
}
</script>
<template>
<Card interactive @activate="handleClick">
<CardContent>
<CardTitle>Click me!</CardTitle>
<p>This card is interactive and supports keyboard navigation.</p>
</CardContent>
</Card>
</template>