Components / Media Card
Media Card
The shared clickable media surface: a card with an optional footer and the standardized gradient hover glow. Use it anywhere media renders as a card (library assets, catalogs, products) so hovering media feels the same everywhere.
import { MediaCard } from '@layers/ui/media-card'Rendered stock
House rules
- It owns only the surface, the footer slot, and the hover behavior; the media itself stays with the caller as children and fills the clipped media region.
- onClick makes it interactive: glow, pointer, and button semantics (role, tabIndex, Enter and Space). Pass label for the accessible name.
- Aspect ratios go on the media region via mediaClassName (or on the card via className for footerless cards); the card imposes none of its own.
- Styles ship with the component (media-card.css is self-imported); no consumer-side stylesheet wiring.