import { Card } from "@heroui/react";
import { Card } from "@heroui/react";
export default () => (
<Card>
<Card.Header>
<Card.Title />
<Card.Description />
</Card.Header>
<Card.Content />
<Card.Footer />
</Card>
);
Card 提供语义变体，描述 prominence 级别而非具体视觉样式，允许主题以不同方式解读：
transparent - 最低 prominence，透明背景（适合嵌套卡片）default - 大多数场景的标准卡片（surface-secondary）secondary - 中等 prominence 以吸引适度注意（surface-tertiary）tertiary - 更高 prominence 用于重要内容（surface-tertiary）
可使用 @layer components 指令自定义 Card 组件类。
了解更多。
@layer components {
.card--secondary {
@apply bg-gradient-to-br from-blue-50 to-purple-50;
}
.card__title {
@apply text-xl font-bold;
}
}
HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。
Card 使用 BEM 命名以实现可预测的样式（查看源码样式）：
.card - 带 padding 与边框的基础容器.card__header - 头部区域容器.card__title - 基础字号与字重的标题.card__description - 弱化描述文本.card__content - 灵活内容容器.card__footer - 行布局的页脚
.card--transparent - 最低 prominence，透明背景（对应 transparent 变体）.card--default - 标准外观，surface-secondary（默认）.card--secondary - 中等 prominence，surface-tertiary（对应 secondary 变体）.card--tertiary - 更高 prominence，surface-tertiary（对应 tertiary 变体）
| Prop | 类型 | 默认值 | 描述 |
|---|
variant | "transparent" | "default" | "secondary" | "tertiary" | "default" | 表示 prominence 级别的语义变体 |
className | string | - | 附加 CSS 类 |
children | React.ReactNode | - | 卡片内容 |
| Prop | 类型 | 默认值 | 描述 |
|---|
className | string | - | 附加 CSS 类 |
children | React.ReactNode | - | 头部内容 |
| Prop | 类型 | 默认值 | 描述 |
|---|
className | string | - | 附加 CSS 类 |
children | React.ReactNode | - | 标题内容（渲染为 h3） |
| Prop | 类型 | 默认值 | 描述 |
|---|
className | string | - | 附加 CSS 类 |
children | React.ReactNode | - | 描述内容（渲染为 p） |
| Prop | 类型 | 默认值 | 描述 |
|---|
className | string | - | 附加 CSS 类 |
children | React.ReactNode | - | 主要内容 |
| Prop | 类型 | 默认值 | 描述 |
|---|
className | string | - | 附加 CSS 类 |
children | React.ReactNode | - | 页脚内容 |
import { Card } from '@heroui/react';
import { cardVariants } from '@heroui/styles';
// Semantic markup
<Card role="article" aria-labelledby="card-title">
<Card.Header>
<Card.Title id="card-title">Article Title</Card.Title>
</Card.Header>
</Card>
// Interactive cards
<a className={cardVariants().base()} href="/details" aria-label="View product details">
<Card.Title>Product Name</Card.Title>
</a>
