---
url: /components/card.md
---
# Card 卡片

`EvCard` 是官网区块内容的容器。三种卡面风格对应不同的展示场景：`tone` 粉彩底适合功能亮点与作品展示，
`sticker` 厚白描边营造轻快的贴纸质感，`featured` 深色渐变在浅色页面上天然成为视觉焦点。

## 粉彩与贴纸

```vue
<EvCard tone="cream" sticker>…</EvCard>
<EvCard tone="mint" hoverable>…</EvCard>
```

## 深色精选卡

```vue
<EvCard featured>…</EvCard>
```

::: tip 可点击卡片
`tag="a"` 渲染为链接卡；搭配 `hoverable` 即获得悬浮轻抬反馈。自定义底色用 `custom-bg` 覆写 tone。
:::

## 磨砂玻璃

玻璃质感的完整介绍（全局开关 / 强度调节 / 覆盖组件 / 令牌）见[磨砂玻璃](/guide/glass)一章。
这里演示卡片在照片底上的叠层效果——照片细节越多，雾面质感越明显：

```vue
<EvCard glass>半透明卡片</EvCard>
<EvCard :glass="false">显式退回实底</EvCard>
```

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| tone | 粉彩底色 | `'plain' \| 'soft' \| 'cream' \| 'blue' \| 'mint' \| 'pink' \| 'lime'` | `'plain'` |
| sticker | 厚白描边贴纸风 | boolean | `false` |
| featured | 深色精选形态 | boolean | `false` |
| hoverable | 悬浮轻抬 | boolean | `false` |
| flat | 去边框与阴影（嵌入场景） | boolean | `false` |
| glass | 磨砂玻璃质感（粉彩 tone / sticker / featured 不参与）；缺省跟随全局（ConfigProvider glass） | boolean | — |
| blur | 磨砂强度（px），内联覆盖 `--ev-glass-blur` | string / number | — |
| saturate | 磨砂饱和度（倍数），内联覆盖 `--ev-glass-saturate` | string / number | — |
| tint | 磨砂底色浓度（%），内联覆盖 `--ev-glass-bg` | string / number | — |
| tag | 渲染标签（可传 `'a'`） | string | `'div'` |
| custom-bg | 自定义底色（覆盖 tone） | string | — |

### 插槽

| 插槽 | 说明 |
| --- | --- |
| default | 卡片内容 |