Card ported

One surface, two sizes.

A surface for a single subject, with an optional quick look that opens into a larger dialog.

Live specimen

Loading demo…

Guidance

When to use

When a single subject needs a compact summary with optional depth.
When the summary should stay on the page while detail opens above it.
When the card has a title, optional description, media, and an owner (meta/status).

When not to use

For tabular comparison — use a table or list.
When there is no detail to reveal — drop `details` and the card stays static.
For destructive confirmations — use a dialog.

Installation

npx shadcn-svelte@latest add @arcui/card

Usage

<script lang="ts">
  import Card from '$lib/components/card/card.svelte';
</script>

<Card title="Quarterly report" description="Revenue is up 18%." status="Updated 2 hours ago">
  {#snippet details()}
    <p>The full breakdown lands here.</p>
  {/snippet}
</Card>

Variants & Examples

With Quick Look Details

Title acts as a trigger button expanding into a full Dialog.

<Card title="Interactive Spec" description="Click to expand full details.">
  {#snippet details()}
    <div>Deep contextual breakdown goes here.</div>
  {/snippet}
</Card>

Static Summary Card

Omits the details snippet, rendering as a pure static container.

<Card title="Documentation Summary" description="All 16 primitives mapped cleanly." />

With Media & Status

Header image preview with live footer status indicator.

{#snippet media()}<img src="/preview.jpg" alt="Preview" />{/snippet}
<Card title="Release v1.0" status="Shipped today" {media} />

API Reference

Prop	Type	Default	Description
`title`	`string`	—	Card heading; becomes the quick-look trigger when details exist.
`description`	`string`	—	Short supporting line.
`media`	`Snippet`	—	Leading visual.
`action`	`Snippet`	—	Trailing footer control.
`avatar`	`Snippet`	—	Footer byline visual.
`meta`	`Snippet`	—	Footer byline text, e.g. owner.
`status`	`string`	—	Footer status line.
`details`	`Snippet`	—	Quick-look content. Enables the dialog.
`open`	`boolean`	—	Controlled quick-look state.
`defaultOpen`	`boolean`	false	Uncontrolled initial state.
`onOpenChange`	`(open: boolean) => void`	—	Quick-look open callback.

Keyboard Interactions

Key	Action
`Enter / Space`	Open the quick look from the title trigger.
`Escape`	Close the quick look.
`Tab`	Move through footer and quick-look controls.

Accessibility

The title trigger stretches its hit area over the card, so pointing anywhere opens the quick look.
The quick look is a labelled dialog with a title and (when present) a description.
Status text is announced via role="status"; the visible roll is aria-hidden.

Motion

Phase 1 still-state: the quick look is a normal dialog. Phase 2 wires the shared-layout morph (layoutId across card and panel), the return-to-card landing, the card lift and the media zoom. This is the port’s designated layoutId spike.

Notes for AI

`details` is the switch for the whole quick look; no details means no dialog.
Keep `data-hover` — the CSS lift depends on it.
Do not hand-write focus traps; Bits UI owns them.

Source of truth: registry/components/card/card.tsx