---
title: Card 卡片
description: 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
isComponent: true
usage: { title: "", description: "" }
spline: message
author: swimly
---

## 基本用法

卡片通常用来容纳一组有关联关系的数据，通过`bordered`控制卡片四周的边框，默认情况是有边框的，通过`default`和`content`来定
义卡片的内容。

> 提示，还可通过`style`设置卡片的样式。

{{ base }}

## 带标题的卡片

通过`title`可设置卡片的标题内容，通过`subtitle`可设置卡片的副标题，支持`props`和`slot`方式设置。

{{ title }}

## 卡片阴影

通过`shadow`属性可定义卡片的阴影，默认不显示的。

{{ shadow }}

## 卡片结构

一个完整的卡片按功能可划分为：`actions`：卡片操作区，`avatar`：卡片中的用户头像，仅在海报风格的卡片中有效，`cover`：卡片
封面图。值类型为字符串，会自动使用 `img` 标签输出封面图；也可以完全最定义封面图，`description`：卡片描述，`footer`：卡片
底部内容，可自行定义，`header`：卡片头部内容，可自行定义。

通过上面的属性或者插槽可自行定义功能比较复杂的卡片结构

{{ layout }}

## 鼠标交互阴影

通过`hoverShadow`可设置当鼠标移上去的时候突出显示，当卡片设置了`shadow`属性之后，鼠标移上去不会有突出显示。

{{ hoverShadow }}

## 不同大小

通过`size`可设置卡片的尺寸，可选：`medium`，`small`，其实主要控制卡片内边距。

{{ size }}

## 不同风格

通过`theme`可设置不同风格卡片，普通风格、海报风格 1（操作区域在顶部）、海报风格 2（操作区域在底部），可选
：`normal`，`poster1`，`poster2`。

{{ theme }}
