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.
Selectable Card
selectable makes the whole card toggle its selected state on click — the multi-select form for large rich cards with cover, title, description and actions. The selected state shows a primary border + light primary background + a check badge in the top corner; clicking interactive elements inside the card (buttons/links) does not trigger selection; Space/Enter work the same way.
A standalone card carries no role by default: clickable/selectable cards often embed action buttons or links inside, and an interactive role would wrap those inner controls in an interactive element (screen readers would lose access to them); the component only keeps tabindex for keyboard reachability. When a card group needs single-select / multi-select semantics, the host explicitly puts role="radio" (or role="checkbox") on the cards and manages exclusive selection itself — the component never overrides an explicit host role and only layers aria-checked syncing on top.
If the host does not set selected, the card toggles internally and reflects the attribute (uncontrolled); once selected is set, the card becomes controlled — it only dispatches oas-change (detail { selected }, the new state) and the host writes the state back. Not selectable while loading; with href, selecting takes precedence over navigation (explicit links/buttons inside still act on their own).
Multi-select cards (uncontrolled)
0 selected
Lightweight start for small teams.
Standard collaboration suite with automation.
Enterprise controls, on-prem and audit logs.
Controlled radio card group (host writes back oas-change)
Up to 5 members · basic boards
Unlimited members · automation
On-prem · audit logs
Loading State
With loading, the content area switches to a skeleton placeholder (sheen animation) and the body is hidden; the host syncs aria-busy.
Loading skeleton
The body appears once data is loaded.
Compact Size
size="small" tightens paddings and the title font size — useful for dense lists. The default is medium.
size=small compact card
Smaller paddings and title font size.
Compact Density
density="compact" is a layout-density tier independent from size: it tightens both the paddings and the spacing between the card's regions (tighter than size="small"), which suits dense dashboards, lists and settings panels. The default is default. It is orthogonal to size (the type scale) and the two compose.
density=compact compact density
Paddings and inter-region spacing tighten for higher information density.
Regular paddings and spacing at the default tier.
Borderless Variant
variant="borderless" removes the container border, which suits nested setting groups inside another card. The default is outlined.
Borderless nesting (settings panel)
Receive mentions, assignments and comment replies.
A weekly summary of project activity every Monday.
Footer Bar
The footer slot is an arbitrary bottom bar independent from the actions area: use it for supplementary notes or metadata, while actions remains the button area.
Footer bar + actions area
We updated our data processing terms. Please review to continue.
Updated 2026-09-01 · Applies to all workspaces
Header Divider (header-bordered)
The divider below the header shows by default; set header-bordered="false" to remove it.
header-bordered=false
A divider separates the title from the content.
The title sits right above the content for lighter grouping.
Shadow States
shadow="none | hover | always": hover shadow, always-on shadow, or no shadow. The hoverable boolean is equivalent to shadow="hover" (kept for compatibility); an explicit shadow value takes precedence over hoverable.
shadow=always
Shadow always on to emphasize elevation.
Shadow + lift on hover (same as hoverable).
User Card (Meta)
Use slot="avatar" for an avatar on the left of the title, and the description attribute (or slot="description") for a line of secondary text below the title. When either is present, the header automatically becomes an "avatar + title + description" layout.
Meta user card
Owns component architecture and rendering performance; recently exploring SSR hydration.
Link Card (href)
With clickable + href, the whole card is semantically a link: an inner anchor carries the address, and focus plus keyboard Enter are natively handled by the anchor; target is passed through. Clicking an embedded button/link still triggers only its own action, not the whole-card navigation.
href link card
Click anywhere on the card to jump (Enter works too).
Opens in a new tab with target passed through.
Composition: Tabs
A card can compose other components — e.g. oas-tabs for a settings-center layout.
Card with nested tabs
Project name, visibility and default language.
Invite members and assign roles.
Archiving policy, webhooks and API tokens.
Grid Card
Let the host grid distribute the blocks inside a card: the card is only a container; layout is plain CSS grid in the light DOM.
Evenly divided grid
32
Ongoing projects
18
Delivered
96%
On-time rate
Dashboard Card
Compose with oas-statistic to build a data dashboard.
Statistics dashboard
Visits today
Error rate
Live sessions
E-commerce Card
A typical product card: cover image + price area + actions + footer.
Product card
¥ 429¥ 599
Tri-mode · Hot-swap · Gasket mount
Free shipping over ¥299 · 7-day returns
Disabled card (disabled)
disabled disables the whole card: grayed-out presentation (dark-mode aware), aria-disabled synced on the host, and no interactive events dispatched — oas-click from clickable, selection toggling and oas-change from selectable all stop. On href cards the inner anchor's address is removed (native navigation disabled too). Controls the card itself carries (buttons/links) keep their own behavior — they have their own disabled.
Disabled clickable / selectable cards
Clicking shows a message.
Clicking gives no feedback (no oas-click).
Keeps the selected look but can no longer toggle.
Horizontal layout (orientation)
orientation="horizontal" moves the cover to the left and stacks title/content/actions in a right-hand content column: the cover column takes 40% width and stretches to the card height (the image is no longer locked to 16:9). Suitable for news items and horizontal product strips with ample horizontal space. Default vertical (cover on top, current behavior).
horizontal with left cover
Cover on the left; title, body and actions on the right.
Cover spreads full width on top (current default).
API
oas-card
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 | — |
density | Density tier: default (default) / compact (tightens paddings and inter-region spacing, tighter than size="small", for dense layouts; orthogonal to size and composable with it) | — | — |
description | Meta secondary text (muted line under the title; dual channel with the description slot, slot wins) | string | — |
disabled | Disables the card: graying + aria-disabled + no interaction events + href stripped (selected look preserved) | boolean | — |
header-bordered | Header divider line (default true; "false" hides it) | — | — |
hoverable | Whether to enable the hover shadow (shadow + lift + pointer) | boolean | — |
href | Link card: whole card acts as a link (wrapped in an internal anchor; keyboard/middle-click native) | string | — |
loading | Loading state: content area swaps to skeleton rows (aria-busy synced) | boolean | — |
orientation | horizontal places the cover left (40% width, full height) with a right-hand content column | string | — |
selectable | Selectable card: click the card body (or press Enter/Space) to toggle the selected state and dispatch oas-change; interactive elements inside the card (buttons/links) do not trigger selection; with href, selecting takes precedence over navigation; not selectable while loading | boolean | — |
selected | Selected state (with selectable): setting it from the host makes the card controlled — the component only dispatches oas-change and never mutates the attribute itself (the host writes it back); when unset, the component toggles internally and reflects this attribute (uncontrolled) | boolean | — |
shadow | Shadow: none / hover (lift on hover) / always; hoverable maps to hover, explicit shadow wins | string | — |
size | Size: small (compact padding, smaller title) / medium (default) | — | — |
target | Link target (with href, e.g. _blank) | string | — |
title | Card title (rendered into the visible title region; absorbed from the host on read so no native hover tooltip remains; pass an empty string to clear); use the "title" slot for rich content | string | — |
variant | Variant: outlined (default, bordered) / borderless (embedded, no border) | — | — |
Events
| Event | Description |
|---|---|
oas-change | Selected state toggled (when selectable), detail is { selected } (the new state after the toggle) |
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 |
avatar | Meta avatar slot (left side of the header; with description forms the avatar+title+subtitle header) |
cover | Custom cover content (mutually exclusive with cover-src, which takes precedence) |
description | Rich Meta secondary content (mutually exclusive with the description attribute, slot wins) |
extra | Extra area on the right of the title |
footer | Independent footer strip (separate from the actions area) |
title | Rich title content slot; overrides the title attribute text when present |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-skeleton-color | var(--oas-color-bg-hover) |
--oas-skeleton-duration | 1.5s |
--oas-skeleton-sheen | var(--oas-color-border) |