element-ui/examples/docs/zh-CN/card.md

## Card 卡片 将信息聚合在卡片容器中展示。 ### 基础用法 包含标题，内容和操作。 :::demo Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时也是可选的。 ```html

卡片名称 操作按钮

{{'列表内容 ' + o }}

``` ::: ### 简单卡片 卡片可以只有内容区域。 :::demo ```html

{{'列表内容 ' + o }}

``` ::: ### 带图片 可配置定义更丰富的内容展示。 :::demo 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。 ```html

好吃的汉堡

{{ currentDate }} 操作按钮

:::

### 卡片阴影

可对阴影的显示情况进行配置。

:::demo `always`、`hover`、`never`，通过设置`shadow`属性来配置卡片阴影。

html

<el-card shadow="always">
  总是显示
</el-card>

<el-card shadow="hover">
  鼠标悬浮时显示
</el-card>

<el-card shadow="never">
  从不显示

``` :::

Attributes

参数	说明	类型	可选值	默认值
header	设置 header，也可以通过 slot#header 传入 DOM	string	—	—
body-style	设置 body 的样式	object	—	{ padding: '20px' }
shadow	设置 shadow 状态	string	always/hover/never	always