## Card
A surface that groups related content — cover, title, body and footer actions — in default/small size, bordered or flat, with a hover lift and a loading skeleton.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-card> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings.
Props:
- card-title: string, default —. Renders the header row; omit for a bare body
- size: 'default' | 'small', default default. Padding density of header/body/actions
- bordered: boolean-ish, default true. Set bordered="false" for a flat, outline-less surface
- hoverable: boolean, default false. Lift the card (border + shadow) on hover
- loading: boolean, default false. Swap the body for a shimmer skeleton while content loads
- cover: slot, default —. Full-bleed image/media above the header
- extra: slot, default —. Right-aligned header action (a link or button)
- actions: slot, default —. Ruled-off footer row of actions
Tokens: bg-container, border, border-hover, split, radius-lg, radius-sm, text-default, text-secondary, ink-a10, bg-hover, font-product, motion-mid, motion-slow, ease-out.
Use when: Card (grouping related content into a titled surface on a dashboard or settings page); List (many uniform rows of the same shape); Descriptions (read-only label/value pairs about one entity).