# Card

The container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/card
```

## Usage

```tsx
import { Button } from '@/components/fetaui/button'
import { Card, CardMedia } from '@/components/fetaui/card'

export function Example() {
  return (
    <Card
      title="Weekend in Lisbon"
      description="Three days of trams, tiles and long lunches by the river."
      meta={['3 nights · from $420', 'Free cancellation']}
      media={<CardMedia />}
      footer={<Button size="sm">Book trip</Button>}
    />
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| variant | tray, plain, muted | tray |
| as | article, li | article |
| headingLevel | 2, 3, 4 | 3 |
| title | ReactNode |  |
| description | ReactNode |  |
| meta | ReactNode[] |  |
| media | ReactNode |  |
| headerAction | ReactNode |  |
| footer | ReactNode |  |
| href | string |  |
| onPress | (event) => void |  |
| selected | boolean | false |
| disabled | boolean | false |
| loading | boolean | false |
| bodyClassName | string |  |
| footerClassName | string |  |
| animated | boolean | true |

## When to use

- Tray when the card has actions.
- Plain inside an existing surface.
- Muted in dense grids.

## When not to use

- Inside another tray: use Plain or Muted there.
- For a row in a list: use Item.
- With more than one primary action.

## Accessibility

- An article, or a list item with `as="li"`, named by its title.
- A clickable card has one link on the title stretched over the card, not a wrapping button. Its own Buttons stay separate targets.
- A selectable card uses aria-pressed.
- Loading sets aria-busy and makes the hidden content inert.

## Motion

- Clickable cards lift 1 px in 150 ms, and the tray and ring deepen.
- Press scales to 0.99 in 100 ms and springs back on release.
- Select moves the ring to ink and pops the check in.
- Skeletons crossfade to content in 240 ms, and the height stays locked.
- With reduced motion, only colour changes.