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
The cover-src attribute or the cover slot places a full-width cover image at the top of the card (object-fit: cover).
cover-src cover image
A 15 km leisure cycling route along the river, perfect for a weekend.
Custom cover via cover slot
A two-day light hiking route recommended for the weekend.
Cover + Actions (Product Card)
The bottom actions slot holds a button group, with a divider automatically added above.
Product card
Active noise canceling · 30h battery · Bluetooth 5.3
¥ 899
Clickable
clickable makes the whole card clickable: focusable, Enter/Space trigger oas-click, with a focus ring on keyboard focus. Clicking a button inside the actions area does not trigger the whole-card click.
Clickable card
Click the card or press Enter/Space to fire oas-click.
Clickable + actions without interference
Click the card body to fire the whole-card click; click the buttons for their own actions.
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
clickable | Whole card clickable (focusable; click / Enter / Space dispatch oas-click) | boolean | — |
cover-alt | Cover image alt text (accessibility) | string | — |
cover-src | Cover image URL placed at the top of the card (object-fit: cover) | string | — |
hoverable | Whether to enable the hover shadow (shadow + lift + pointer) | boolean | — |
title | Card title | string | — |
Events
| Event | Description |
|---|---|
oas-click | Whole-card click (when clickable), detail contains originalEvent |
Slots
| Name | Description |
|---|---|
| default | Card content |
actions | Bottom action area (view / edit / delete button groups), with a divider above |
cover | Custom cover content (mutually exclusive with cover-src, which takes precedence) |
extra | Extra area on the right of the title |