# Image card (goodtabs UI)

Media on top in a fixed aspect, with a caption and one mono meta line below.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/image-card.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/image-card`

## Usage

```tsx
import { ImageCard } from "@/components/ui/image-card"

<ImageCard title="Dashboard, dark theme" meta="1440 x 900" media={<img src="/shots/dashboard.png" alt="" />} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| media | `ReactNode` |  | What fills the slot: an img, a video, a demo. Falls back to a hairline pattern. |
| title | `string` |  | The caption under the media. |
| meta | `string` |  | One quiet mono line under the title. |
| href | `string | UrlObject` |  | Makes the title a link. Passed to next/link. |
| aspect | `"video" | "square" | "4/3"` | `"video"` | Shape of the media slot. |

## When to use

- Galleries of screenshots, templates or inspiration where every item has a picture
- A grid of assets with a size, date or credit under each
- Any list where the picture is the first thing to scan

## When not to use

- When there is no picture; use a link card or a plain list
- When the whole card should be one click; put the link on the card, not the title
- For a hero visual, which wants a frame, not a caption

## Notes for agents

- Server component on shadcn's Card; an img or video passed as media is sized to cover the slot
- The placeholder is a hairline pattern drawn with var(--border), so it re-themes; it is aria-hidden
- Only the title becomes a link when href is set; the media stays inert so it can hold a demo
- aspect is a fixed set: video, square or 4/3. Add a class to the slot through the card if you need another

Docs: https://ui.goodtabs.co/components/image-card