Media Card
Image-backed content tile. A full-bleed photo under a soft bottom scrim, a mono code tag, title and meta, and one corner action — Play, a CTA, or none. Composes the Card frame with markers off, so the image carries the card identity.
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/andromeda-media-card2
For dark mode, add the dark class to your <html> element:
<html class="dark">Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| image | string | DEFAULT_IMAGE | Background image URL for the full-bleed media. |
| code | string | 'MIX-01' | Mono identifier shown in the top-left tag; a falsy value hides it. |
| title | string | 'Your Mix' | Primary title shown over the lower image edge. |
| meta | string | 'Updates daily' | Uppercase metadata shown beneath the title. |
| action | 'play' | 'cta' | 'none' | 'play' | Selects the card's single action treatment. |
| ctaLabel | string | 'Open' | Accessible label for the CTA action's arrow icon button. |
| playing | boolean | false | Shows the active pause control when the play action is selected. |
| onAction | () => void | NOOP | Called when the selected play or CTA control is pressed. |
| height | number | string | 200 | CSS height of the card. |
| className | string | '' | Additional class names applied to the Card root. |
| style | React.CSSProperties | EMPTY_STYLE | Inline styles merged onto the Card root. |
AI Canvas