element-ui/examples/docs/en-US/card.md

## Card Integrate information in a card container. ### Basic usage Card includes title, content and operations. :::demo Card is made up of `header` and `body`. `header` is optional, and its content distribution depends on a named slot. ```html

Card name Operation button

{{'List item ' + o }}

``` ::: ### Simple card The header part can be omitted. :::demo ```html

{{'List item ' + o }}

``` ::: ### With images Display richer content by adding some configs. :::demo The `body-style` attribute defines CSS style of custom `body`. This example also uses `el-col` for layout. ```html

Yummy hamburger

{{ currentDate }} Operating button

:::

### Shadow

You can define when to show the card shadows

:::demo The `shadow` attribute determines when the card shadows are displayed. It can be `always`, `hover` or `never`.

html

<el-card shadow="always">
  Always
</el-card>

<el-card shadow="hover">
  Hover
</el-card>

<el-card shadow="never">
  Never
</el-card>

``` :::

Attributes

Attribute	Description	Type	Accepted Values	Default
header	title of the card. Also accepts a DOM passed by slot#header	string	—	—
body-style	CSS style of body	object	—	{ padding: '20px' }
shadow	when to show card shadows	string	always / hover / never	always