Card ​

Integrate information in a card container.

Basic usage ​

Card includes title, content and operations.

Card is made up of header, body and footer. header and footer are optional, and its content distribution depends on a named slot.

Card name

List item 1

List item 2

List item 3

List item 4

Simple card ​

The header part can be omitted.

List item 1

List item 2

List item 3

List item 4

With images ​

Display richer content by adding some configs.

The body-style attribute defines CSS style of custom body.

Yummy hamburger

Shadow ​

You can define when to show the card shadows

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

Always
Hover
Never

API ​

Attributes ​

NameDescriptionTypeDefault
headertitle of the card. Also accepts a DOM passed by slot#headerstring—
footer 2.4.3footer of the card. Also accepts a DOM passed by slot#footerstring—
body-styleCSS style of card bodyobject—
header-class 2.9.8custom class name of card headerstring—
body-class 2.3.10custom class name of card bodystring—
footer-class 2.9.8custom class name of card footerstring—
shadowwhen to show card shadowsenumalways

Slots ​

NameDescription
defaultcustomize default content
headercontent of the Card header
footercontent of the Card footer

Source ​

Component • Style • Docs

Contributors ​