Media Card

An image or video fills the top edge-to-edge, with title, description and footer below.

cards
card
structural
media
image

Field notes

Three weeks in the studio.

Quick usage

usage

import { MediaCard } from "@pinky-ui/components";

<MediaCard
  media={<img src="/cover.jpg" alt="" />}
  title="Field notes"
  description="Three weeks in the studio."
/>

Presets

Default

16:9 media.

Square

For avatars or square photography.

mediaAspect={"square"}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add media-card

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
media	ReactNode	—	Required. An <img>, <video> or any block-level media — fills the slot via object-cover.
title	ReactNode	—	Required.
description	ReactNode	—	Optional.
footer	ReactNode	—	Optional.
mediaAspect	"video" \| "square" \| "portrait"	"video"	Aspect ratio of the media slot.
padded	boolean	true	Applies to the text content only — the media slot is always edge-to-edge.
radius	"md" \| "lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
shadow	"neutral" \| "pink"	"neutral"	Shadow token pair.
as	ElementType	"div"	Pass Link from next/link to make the whole card navigable.
href	string	—	Only meaningful when as renders an anchor.

Accessibility

The media slot has no built-in alt text — that belongs on the <img> the caller passes in.
Same focus-visible rule as Basic Card once onClick/href is present.

Reduced motion

No transform-based motion; the hover shadow is a colour/opacity change only.

When to use

Article previews, product cards, anything photography-led

When not to use

Media that should sit beside text rather than above it — use Horizontal Card