card.md 1.6 KB
title: Card
lang: en-US
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.
card/basic
:::
Simple card
The header part can be omitted.
:::demo
card/simple
:::
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.
card/with-images
:::
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.
card/shadow
:::
Attributes
| Name | 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 |
Slots
| Name | Description |
|---|---|
| — | customize default content |
| header | content of the Card header |