docs/en-US/component/card.md
Integrate information in a card container.
Card includes title, content and operations.
:::demo Card is made up of header, body and footer. header and footer are optional, and its content distribution depends on a named slot.
card/basic
:::
The header part can be omitted.
:::demo
card/simple
:::
Display richer content by adding some configs.
:::demo The body-style attribute defines CSS style of custom body.
card/with-images
:::
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
:::
| Name | Description | Type | Default |
|---|---|---|---|
| header | title of the card. Also accepts a DOM passed by slot#header | ^[string] | — |
| footer ^(2.4.3) | footer of the card. Also accepts a DOM passed by slot#footer | ^[string] | — |
| body-style | CSS style of card body | ^[object]CSSProperties | — |
| header-class ^(2.9.8) | custom class name of card header | ^[string] | — |
| body-class ^(2.3.10) | custom class name of card body | ^[string] | — |
| footer-class ^(2.9.8) | custom class name of card footer | ^[string] | — |
| shadow | when to show card shadows | ^[enum]always | never | hover | always |
| Name | Description |
|---|---|
| default | customize default content |
| header | content of the Card header |
| footer | content of the Card footer |