Card
An information container that groups a set of related content.
Basic Usage
Basic card
This is a basic card showing a summary of information.
The content area supports any custom structure.
No Title
Card without title
When the title attribute is omitted, only the content area remains.
Hoverable
Hover shadow
Hover over the card to see the shadow transition.
Extra Area
Card with extra actions
Place actions to the right of the title via the extra slot.
Cover Image
An image can be placed in the content area to compose a "cover + title + description" media card.
Card with cover image
A two-day light hiking route recommended for the weekend.
Image cover (img)
A 15 km leisure cycling route along the river.
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
hoverable | Whether to enable the hover shadow | boolean | — |
title | Card title | string | — |
Slots
| Name | Description |
|---|---|
| default | Card content |
extra | Extra area on the right of the title |