# Card

A presentational card surface — media, header, body, and footer slots, with appearance and orientation variants.

<p class="kai-tag-sub">kai-card</p>

A presentational card surface. One element: structural slots for media, header, and footer, with `appearance` and `orientation` variants. Compose the content; the card owns the chrome.

## Preview

> **tip:** 
Use `<kai-card>` for any boxed surface you compose yourself — a promo, a media tile, a summary block. The title and description are body or `slot="header"` content; the card only owns the regions a slot can position. The generative-UI cards (`<kai-confirm>`, `<kai-form>`, `<kai-choice>`) are separate typed components.

## Anatomy

The body is the default slot. The rest are structural regions, each rendered only when filled:

- `slot="media"` — full-bleed image, video, or illustration. Pinned to the top (vertical) or start (horizontal), clipped to the card corners.
- `slot="header"` — header content, e.g. a title. `slot="header-actions"` — an actions cluster at the end of the header row.
- **default slot** — the body.
- `slot="footer"` — footer content. `slot="footer-actions"` — buttons at the end of the footer row.

```html
<kai-card appearance="filled" dismissible>
  <img slot="media" src="/preview.png" alt="Report preview" />
  <h3 slot="header">Quarterly report</h3>
  Your Q2 numbers are ready to review.
  <button slot="footer-actions">Open</button>
</kai-card>
```

## Examples

### Header and body

### Media

Full-bleed media at the top, body below.

### Header and footer actions

`slot="header-actions"` and `slot="footer-actions"` pin clusters to the end of each row.

`footer-actions` is responsive on its own: a right-aligned row when there is room, and a full-width vertical stack when the card is too narrow (a container query on the card's width). Author the **primary action last** so it sits at the row's right and rises to the top of the stack. `kai-button` fills the width automatically when stacked, so the same markup works at any width.

### Appearance

`outlined` (default), `filled`, `plain`, `accent`.

### Horizontal

`orientation="horizontal"` puts the media at the start, content beside it.

### Responsive

`orientation="responsive"` is horizontal when the card's container is wide enough and vertical when it is not. It is a container query on the card's **own** width, so a card collapses wherever it is narrow (a sidebar, a grid cell), independent of the viewport. The footer action cluster collapses the same way on its own.

The breakpoint is the **`collapse`** prop (a CSS length, default `28rem`); set `collapse="32rem"` to change it. Container-query breakpoints can't be CSS variables, so this is a prop the card bakes into a per-instance `@container` rule, not a `::part` token.

### Promo

`appearance="filled"` + `dismissible`, with an illustration, title, description, and CTA in the body. The × fires `kai-dismiss`.

### Clickable

`clickable` makes the whole card a button (`kai-card-click`, Enter/Space). Do not combine it with action buttons.

### Dense

`dense` tightens `--kai-card-spacing` for lists and feeds.

## Slots

## Props

## Composed from