CleenUI · Media · CardMedia

CardMedia

Card variant with built-in image or video media slot — aspect-ratio control, hover overlays, play-on-hover.

storybook.cleenui.com
Open Storybook
Live preview

Interactive CardMedia preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About CardMedia

CardMedia extends the base Card with a media slot at the top. Supports static images, autoplaying or hover-triggered video, and overlay content positioned on top of the media.

Aspect ratio is locked to prevent layout shift on load; lazy loading is on by default; reduced-motion users get a static-poster fallback for video. Useful anywhere a card needs visual emphasis.

When to use it

  • Article and blog-post listings with hero images.
  • Product grid tiles in e-commerce or marketplaces.
  • Course or video gallery cards.
  • Portfolio and case-study browsing.

Common props

Prop
Type
Description
media
{ type: "image" | "video", src: string }
Media source.
aspectRatio
string
CSS aspect ratio (e.g. "16/9").
playOnHover
boolean
Start video on hover.
overlay
ReactNode
Content rendered on top of the media.
lazy
boolean
Lazy-load the media asset.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

1
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.