# Card
> Generated from card.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `card-title` | string | `—` | Renders the header row; omit for a bare body |
| `size` | 'default' | 'small' | `default` | Padding density of header/body/actions |
| `bordered` | boolean-ish | `true` | Set bordered="false" for a flat, outline-less surface |
| `hoverable` | boolean | `false` | Lift the card (border + shadow) on hover |
| `loading` | boolean | `false` | Swap the body for a shimmer skeleton while content loads |
| `cover` | slot | `—` | Full-bleed image/media above the header |
| `extra` | slot | `—` | Right-aligned header action (a link or button) |
| `actions` | slot | `—` | Ruled-off footer row of actions |

## Visual standard (measured)
- Container: border 1px #E3E3E3 · radius 12px · bg #FFFFFF
- Cover: full-bleed media above the header, no inset; hidden when the slot is empty
- Header: padding 16/20 · 16/24 SemiBold #1A1A1A · divider #F1F1F1 · extra action right-aligned
- Body: padding 20 · 14/22 #4A4A4A
- Actions: footer row, 12/20 padding, 8 gap, top divider #F1F1F1; hidden when empty
- Small size: header 8/12 · body 12 · actions 8/12 (antd Card size=small)
- Bordered=false: border-color transparent — a flat surface
- Hover (hoverable): border #D3B4FF + shadow, motion-mid ease-out on a persistent node
- Loading: body → shimmer skeleton bars (aria-busy), motion-slow sweep

## When to use
- **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

Titles are sentence case and name the group — 'Live results', not 'LIVE RESULTS'. Keep one idea per card; reach for hoverable only when the whole card is clickable. Use a cover for a media-led card, footer actions for card-level operations, and loading while the body fetches.