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
:::
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| header | title of the card. Also accepts a DOM passed by slot#header |
^[string] | — |
| body-style | CSS style of card body | ^[object]CSSProperties |
— |
| shadow | when to show card shadows | ^[enum]always \| never \| hover |
always |
Slots
| Name | Description |
|---|---|
| default | customize default content |
| header | content of the Card header |