Media Card
Presents an item on its own artwork, for content the image identifies.
Configurations
Supported configurations for this component.
Configurations
6 examplesPlay action
CTA action
No action
Playing
Stacked
Stacked, tag on image
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| image | string | - | Media image URL. Full-bleed background in `overlay` layout; a discrete block at the top of the card in `stacked` layout. Omitted, the card shows its plain surface where the photo would be. |
| lightImage | string | - | Optional light-theme version of `image`, for a picture made for both themes. Both are layered and the Andromeda theme shows one: `image` in dark, `lightImage` in light. Needs `image`. If `lightImage` fails to load, `image` shows in light too. |
| layout | 'overlay' | 'stacked' | 'stacked-pinned' | 'overlay' | `overlay` (default): image fills the card, text sits over a lower scrim. `stacked`: image is its own block at the top, text sits below it on the plain card surface — for a caption that needs full-contrast text rather than text-over-photo. `stacked-pinned`: the same, with `code` pinned to the image's top-left corner instead of the title line. |
| code | string | 'MIX-01' | Short identifier; a small pinned tag on the image corner in `overlay`, alongside the title in `stacked`. A falsy value hides it. |
| title | string | 'Your Mix' | Primary title shown over the lower image edge in `overlay`, or below the image in `stacked`. |
| meta | string | 'Updates daily' | Line beneath the title: an uppercase sans metadata label in `overlay`, a sentence-case description in `stacked`. |
| action | 'play' | 'cta' | 'none' | 'play' | Selects the card's single action treatment. |
| ctaLabel | string | 'Open' | CTA action wording: the visible label on `stacked`'s primary button, the accessible label on `overlay`'s arrow icon button. |
| playing | boolean | false | Shows the active pause control when the play action is selected. |
| onAction | () => void | NOOP | Called when the play or CTA control is pressed, or the card is clicked anywhere else. |
| height | number | string | 200 | CSS height of the card in `overlay` layout, or of the image block alone in `stacked` layout (the content block below adds its own height on top of it). |
| className | string | '' | Additional class names applied to the Card root. |
| style | React.CSSProperties | EMPTY_STYLE | Inline styles merged onto the Card root. |
AI Canvas