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`	底部区域，弹性布局

Props

Card

属性	类型	默认值	说明
`variant`	`'default' \| 'elevated' \| 'flat' \| 'interactive' \| 'primary' \| 'secondary'`	`'default'`	卡片变体类型
`padding`	`'none' \| 'sm' \| 'default' \| 'lg'`	`'default'`	卡片内边距
`texture`	`'none' \| 'grid' \| 'dots'`	`'none'`	背景纹理：蓝图网格 / 点阵
`deco`	`'none' \| 'hud'`	`'none'`	HUD 四角十字准星装饰层
`interactive`	`boolean`	`false`	是否可点击，添加 `role="button"`、`tabindex="0"` 和键盘支持
`disabled`	`boolean`	`false`	禁用交互：`tabindex="-1"`、`aria-disabled="true"`，且不触发 `activate`
`class`	`string`	—	自定义 CSS 类

事件

事件	说明
`activate`	当 `interactive=true`（或 `variant="interactive"`）时，点击或按 Enter/Space 键触发，返回原生 `Event` 对象

CardTitle

属性	类型	默认值	说明
`as`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	`'h3'`	渲染的标题元素；非法值回退到 `h3`
`class`	`string`	—	自定义 CSS 类

CardHeader / CardDescription / CardContent / CardFooter

属性	类型	默认值	说明
`class`	`string`	—	自定义 CSS 类

插槽

插槽	作用域	说明
`default`	—	所有组件的默认插槽，用于插入内容

可访问性

语义化结构：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>

Card 卡片 ​

预览 ​

卡片标题

默认

提升

扁平

交互式

主要

次要

安装 ​

用法 ​

变体 ​

纹理与装饰 ​

内边距 ​

模板组合 ​

文章卡片 ​

文件卡片 ​

评价卡片 ​

子组件 ​

Props ​

Card ​

事件 ​

CardTitle ​

CardHeader / CardDescription / CardContent / CardFooter ​

插槽 ​

可访问性 ​

可点击卡片 ​