Media Card

Block

Card with image handling, fallbacks, and layout options

Basic Usage

Getting Started with React

Learn the fundamentals of React including components, props, and state management.

Jan 15, 2024

5 min read

Installation

pnpm add @corew500/ui

Usage

import { MediaCard } from "@corew500/ui/blocks/media-card"

<MediaCard>Content</MediaCard>

Horizontal

Featured Project

A comprehensive design system built with modern tools and best practices.

View Project Source Code

CMS Integration

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

New

Getting Started with React

Learn the fundamentals of React including components, props, and state management for building modern web applications.

Jan 15, 2024

5 min read

CMS FieldsEN

Title

Description

Layout

Image Aspect Ratio

Image Hover Effect

Description Lines

Show Badge

Shown

Badge Text

Show Metadata

Shown

Date

Read Time

Show Primary Action

Shown

Action Label

Show Secondary Action

Hidden

This simulates how a content editor configures media cards in Payload CMS. Switch locales to see localized content.

API Reference

Props

Prop	Type	Default	Description
`title*`	string	—	Card title (required)
`description`	string	—	Card description/excerpt
`image`	{ src: string; alt: string; }	—	Image source
`imageSlot`	enum	—	Custom image slot for framework-specific images (e.g., Next.js Image). Takes precedence over `image` prop.
`fallbackIcon`	enum	—	Fallback icon to show when image fails to load or is not provided.
`aspectRatio`	number	`16 / 9`	Image aspect ratio.
`layout`	enum	`vertical`	Layout variant. - `vertical`: Image above content (default) - `horizontal`: Image beside content
`imageHover`	enum	`zoom`	Image hover effect. - `none`: No effect - `zoom`: Scale up image on hover - `brightness`: Brighten image on hover
`descriptionLines`	enum	`3`	Max lines for description (line-clamp).
`metadata`	MediaCardMetadata[]	—	Metadata items (displayed as a row with icons)
`action`	MediaCardAction	—	Primary action button
`secondaryAction`	MediaCardAction	—	Secondary action button
`badge`	enum	—	Optional badge (ReactNode) displayed over the image

Accessibility

Additional

- Image requires alt text via `image.alt` or `imageSlot` props
Card structure uses semantic heading hierarchy (CardTitle)
Action buttons have accessible labels

Localization

Translatable Content

- Component accepts pre-resolved translated strings
All text customizable: title, description, metadata.text, action.label

Related Components

mediaCardVariants