MediaCard
MediaCard — Prism component.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
MediaCard — Prism component.
Accessibility
When the whole card is actionable, expose a single accessible name and make it reachable with Tab + Enter. Decorative imagery uses empty alt.
Import
const { MediaCard } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
artwork | string | — | Album / cover art URL; a music-note placeholder shows when absent. |
eyebrow | React.ReactNode | — | Small label above the title. Default "Now playing". |
title | React.ReactNode | — | |
subtitle | React.ReactNode | — | |
progress | number | — | Playback progress 0–100. |
elapsed | React.ReactNode | — | |
total | React.ReactNode | — | |
controls | React.ReactNode | — | Transport control nodes (IconButtons). |
className | string | — |