Skip to content


Cards are used to group and display content in a way that is easily readable.

Basic usage

Card includes title, content and operations.

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

Simple card

The Card only contains content.

Only title

The Card only contains title.


The Card can set divider attribute style.


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.


You can set description attribute to define Card's description.

Cover and Actions

You can set actions Slot to define Card Action Bar , also you can set cover prop to show Card's cover.

Embed style card

You can set embed attribute to define Card's embed style.

In light mode, sometimes you may need to make background a bit darker to distinguish card from white background.

Custome Actions


Here is the fully defined form of the card exaples.

Card Props

titlestringundefinedCard title.
descriptionstringundefinedCard description.
contentstringundefinedCard content.
coverstringundefinedCard header's cover.
size'sm' | 'md' 'md'Size of the card.
shadow'always' | 'hover'neverWhen to show card's shadow
dividerbooleanfalseWhether show Card divider.
embedbooleanfalseWhether show embed style card.
headerstring | VNodeundefinedCustomer card's header.
extrastring | VNodeundefinedCustomer card's header extra.
actionsstring | VNodeundefinedCustomer card's actions bar.

Card Slots

default()Customize default content.
header()Customize content of the Card header.
extra()Customize content of the Card extra.
actions()Customize content of the Card actions.

MIT Licensed