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

<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)

<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

<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

<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

<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

Props

Card

Prop	Type	Default	Description
variant	'default' | 'elevated' | 'flat' | 'interactive' | 'primary' | 'secondary'	'default'	Card variant type
texture	'none' | 'grid' | 'dots'	'none'	Background texture: blueprint grid / dot matrix
deco	'none' | 'hud'	'none'	HUD four-corner crosshair decoration layer
padding	'none' | 'sm' | 'default' | 'lg'	'default'	Card padding
interactive	boolean	false	Whether clickable, adds role="button", tabindex="0" and keyboard support
disabled	boolean	false	Disables interaction: tabindex="-1", aria-disabled="true", and activate is never emitted
class	string	—	Custom CSS class

Card Events

Event	Description
activate	Triggered when interactive=true (or variant="interactive"), fired on click or Enter/Space key press, returning the native Event object

CardTitle

Prop	Type	Default	Description
as	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'	'h3'	Rendered heading element; invalid values fall back to h3
class	string	—	Custom CSS class

CardHeader / CardDescription / CardContent / CardFooter

Prop	Type	Default	Description
class	string	—	Custom CSS class

Slots

Slot	Scope	Description
default	—	Default slot for all components, used to insert content

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:

<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>