Card

A neo-brutalist card container supporting 6 variants and composable sub-components for structured content presentation.

Demo

Preview

默认

卡片标题

卡片描述信息。

这是卡片内容区域，可以放置文本、图片或其他组件。

变体

默认

标准阴影

提升

更大阴影

扁平

无阴影

交互式

悬停查看效果

主要

主要颜色边框和阴影

次要

次要颜色边框和阴影

内边距

内边距: 无

内边距: 小

内边距: 默认

内边距: 大

纹理与装饰（texture / deco）

蓝图网格 + HUD 准星

点阵纹理

Installation

pnpm dlx brutx-vue@latest add card

Usage

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>

Variants

Variant	Description
`default`	Standard shadow
`elevated`	Large shadow for emphasis
`flat`	No shadow
`interactive`	Shadow with hover lift effect and pointer cursor
`primary`	Primary color shadow and border
`secondary`	Secondary color shadow and border

Texture & Decoration

texture provides background dot/grid patterns and deco adds a HUD decoration layer; both stack with any variant:

Prop	Values	Description
`texture`	`none` / `grid` / `dots`	Background texture: blueprint grid / dot matrix (background-image based, never conflicts with background color)
`deco`	`none` / `hud`	Four-corner crosshair decoration layer (pseudo-element based, industrial calibration feel)

vue

<template>
    <Card variant="interactive" texture="grid" deco="hud">
        <CardTitle>HUD Monitor Panel</CardTitle>
    </Card>
</template>

Padding

Padding	Value
`none`	`p-0`
`sm`	`p-3`
`default`	`p-5`
`lg`	`p-8`

Template Recipes

Compose new card templates directly from the Card sub-components.

Article 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">Read more</Button>
    </CardFooter>
</Card>

File Card

vue

<Card>
    <CardHeader>
        <CardTitle>report-2026.pdf</CardTitle>
        <CardDescription>PDF · 3.2 MB</CardDescription>
    </CardHeader>
    <CardFooter>
        <Button variant="outline" size="sm">Download</Button>
    </CardFooter>
</Card>

Testimonial Card

vue

<Card variant="elevated">
    <CardContent>
        <p class="font-bold">“This product changed our workflow.”</p>
    </CardContent>
    <CardFooter>
        <span class="text-sm font-black">Alex Chen · Product Manager</span>
    </CardFooter>
</Card>

Sub-components

Component	Description
`Card`	Root container, supports variant and padding props
`CardHeader`	Header area with bottom padding
`CardTitle`	Bold title text with letter spacing
`CardDescription`	Muted description text
`CardContent`	Main content area
`CardFooter`	Footer area with flex layout

API Reference

Card

Card — Props
Name	Type	Default	Description
`variant`	`"accent-subtle" \| "default" \| "destructive-subtle" \| "elevated" \| "flat" \| "info-subtle" \| "interactive" \| "primary-subtle" \| "primary" \| "secondary-subtle" \| "secondary" \| "success-subtle" \| undefined`	`"default"`	Controls the card color, shadow, or interactive appearance; the `interactive` variant also enables interactive semantics.
Details Declared type NonNullable<"flat" \| "default" \| "interactive" \| "primary" \| "secondary" \| "primary-subtle" \| "secondary-subtle" \| "success-subtle" \| "info-subtle" \| "accent-subtle" \| "elevated" \| "destructive-subtle" \| null \| undefined> \| undefined Literal values `"accent-subtle"` `"default"` `"destructive-subtle"` `"elevated"` `"flat"` `"info-subtle"` `"interactive"` `"primary-subtle"` `"primary"` `"secondary-subtle"` `"secondary"` `"success-subtle"` Default value details Declaration `'default'` Source: packages/ui/src/components/card/Card.vue Resolved value `"default"` Source Card.vue:12 packages/ui/src/components/card/Card.vue
`padding`	`"default" \| "lg" \| "none" \| "sm" \| undefined`	`"default"`	The preset padding for the card content area.
Details Declared type NonNullable<"default" \| "lg" \| "sm" \| "none" \| null \| undefined> \| undefined Literal values `"default"` `"lg"` `"none"` `"sm"` Default value details Declaration `'default'` Source: packages/ui/src/components/card/Card.vue Resolved value `"default"` Source Card.vue:13 packages/ui/src/components/card/Card.vue
`texture`	`"dots" \| "grid" \| "none" \| undefined`	`undefined`	A background texture layered over the card color: blueprint grid or halftone dots.
Details Declared type NonNullable<"none" \| "grid" \| "dots" \| null \| undefined> \| undefined Literal values `"dots"` `"grid"` `"none"` Default value details Declaration `undefined` Source: packages/ui/src/components/card/Card.vue Resolved value `undefined` Source Card.vue:15 packages/ui/src/components/card/Card.vue
`deco`	`"hud" \| "none" \| undefined`	`undefined`	An optional HUD-style four-corner crosshair decoration, for visual presentation only.
Details Declared type NonNullable<"none" \| "hud" \| null \| undefined> \| undefined Literal values `"hud"` `"none"` Default value details Declaration `undefined` Source: packages/ui/src/components/card/Card.vue Resolved value `undefined` Source Card.vue:17 packages/ui/src/components/card/Card.vue
`interactive`	`boolean \| undefined`	`false`	Makes the card respond to clicks and Enter/Space, adding button semantics and keyboard focus.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/card/Card.vue Resolved value `false` Source Card.vue:18 packages/ui/src/components/card/Card.vue
`disabled`	`boolean \| undefined`	`false`	Disables focus and activation for an interactive card and sets `aria-disabled`.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/card/Card.vue Resolved value `false` Source Card.vue:20 packages/ui/src/components/card/Card.vue
`class`	`string \| undefined`	`undefined`	CSS classes added to the card root container.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/card/Card.vue Resolved value `undefined` Source Card.vue:21 packages/ui/src/components/card/Card.vue

Card — Events
Name	Signature or type	Description
`@activate`	`[event: Event]`	Emits the native event when an interactive card is activated by the primary click, Enter, or Space. It is suppressed when disabled or when the event originates from a nested interactive element.
Details Declared type [event: Event] Source Card.vue packages/ui/src/components/card/Card.vue

Card — Slots
Name	Signature or type	Description
`#default`	`{}`	Card body content, commonly composed with `CardHeader`, `CardContent`, and `CardFooter`.
Details Declared type {} Source Card.vue packages/ui/src/components/card/Card.vue

CardContent

CardContent — Props
Name	Type	Default	Description
`class`	`string \| undefined`	`—`	CSS classes added to the card main-content region.
Details Declared type string \| undefined Default value details Not declared `—` Source CardContent.vue:6 packages/ui/src/components/card/CardContent.vue

CardContent — Slots
Name	Signature or type	Description
`#default`	`{}`	Card body content rendered in the main-content region.
Details Declared type {} Source CardContent.vue packages/ui/src/components/card/CardContent.vue

CardDescription

CardDescription — Props
Name	Type	Default	Description
`class`	`string \| undefined`	`—`	CSS classes added to the description text element.
Details Declared type string \| undefined Default value details Not declared `—` Source CardDescription.vue:6 packages/ui/src/components/card/CardDescription.vue

CardDescription — Slots
Name	Signature or type	Description
`#default`	`{}`	Supplementary descriptive text for the card.
Details Declared type {} Source CardDescription.vue packages/ui/src/components/card/CardDescription.vue

CardFooter

CardFooter — Props
Name	Type	Default	Description
`class`	`string \| undefined`	`—`	CSS classes added to the card footer action region.
Details Declared type string \| undefined Default value details Not declared `—` Source CardFooter.vue:6 packages/ui/src/components/card/CardFooter.vue

CardFooter — Slots
Name	Signature or type	Description
`#default`	`{}`	Card footer content, commonly actions or status information.
Details Declared type {} Source CardFooter.vue packages/ui/src/components/card/CardFooter.vue

CardHeader

CardHeader — Props
Name	Type	Default	Description
`class`	`string \| undefined`	`—`	CSS classes added to the card header region.
Details Declared type string \| undefined Default value details Not declared `—` Source CardHeader.vue:6 packages/ui/src/components/card/CardHeader.vue

CardHeader — Slots
Name	Signature or type	Description
`#default`	`{}`	Card header content, commonly a title and description.
Details Declared type {} Source CardHeader.vue packages/ui/src/components/card/CardHeader.vue

CardTitle

CardTitle — Props
Name	Type	Default	Description
`as`	`"h2" \| "h3" \| "h5" \| "h1" \| "h4" \| "h6" \| undefined`	`"h3"`	Selects which HTML heading element from `h1` through `h6` renders the title.
Details Declared type "h2" \| "h3" \| "h5" \| "h1" \| "h4" \| "h6" \| undefined Literal values `"h1"` `"h2"` `"h3"` `"h4"` `"h5"` `"h6"` Default value details Declaration `'h3'` Source: packages/ui/src/components/card/CardTitle.vue Resolved value `"h3"` Source CardTitle.vue:10 packages/ui/src/components/card/CardTitle.vue
`class`	`string \| undefined`	`undefined`	CSS classes added to the heading element.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/card/CardTitle.vue Resolved value `undefined` Source CardTitle.vue:11 packages/ui/src/components/card/CardTitle.vue

CardTitle — Slots
Name	Signature or type	Description
`#default`	`{}`	Card title text or inline heading content.
Details Declared type {} Source CardTitle.vue packages/ui/src/components/card/CardTitle.vue

Accessibility

Semantic structure: CardTitle renders as an h3 heading element by default, customizable to an appropriate heading level via the as prop
Interactive feedback: The interactive variant provides hover effects; it is recommended to use it with keyboard focus styles
Clickable cards: Setting the interactive prop (or using variant="interactive") adds role="button" and tabindex="0" to the card, with Enter/Space key support to trigger the activate event (dispatching native event parameter)
Disabled state: An interactive card with disabled is not focusable (tabindex="-1"), is marked aria-disabled="true", and neither clicks nor keys trigger activate; visually, the pointer cursor and hover/press interaction styles are no longer applied, distinguishing it from interactive cards
Nested interactive elements: Clicks on, or Enter/Space key presses on, interactive elements nested inside the card (buttons/links) do not trigger the card activate (consistent with onClick behavior, avoiding double-firing of "child action + card activation"); also avoid nesting interactive elements inside an interactive card, which would create invalid ARIA nesting
Content organization: The CardHeader, CardContent, and CardFooter sub-components provide a clear content structure, making it easier for assistive technologies to understand the page layout

Clickable Card

Use the interactive prop to make a card clickable, automatically adding pointer cursor and hover lift effect:

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 ​

Demo ​

卡片标题

默认

提升

扁平

交互式

主要

次要

Installation ​

Usage ​

Variants ​

Texture & Decoration ​

Padding ​

Template Recipes ​

Article Card ​

File Card ​

Testimonial Card ​

Sub-components ​

API Reference ​

Card

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

Declared type

Source

CardContent

Declared type

Default value details

Source

Declared type

Source

CardDescription

Declared type

Default value details

Source

Declared type

Source

CardFooter

Declared type

Default value details

Source

Declared type

Source

CardHeader

Declared type

Default value details

Source

Declared type

Source

CardTitle

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

Accessibility ​

Card

Demo

Installation

Usage

Variants

Texture & Decoration

Padding

Template Recipes

Article Card

File Card

Testimonial Card

Sub-components

API Reference

Accessibility

Clickable Card