Image Card

Image Cards combine images with text overlays, perfect for galleries, feature showcases, or visual navigation.

Usage

Code

mdx

1<ImageCard
2  src="/images/feature.png"
3  alt="Feature screenshot"
4  title="Amazing Feature"
5  description="Description of the feature"
6  href="/docs/v1.0.0/features"
7/>

Live Examples

Basic Image Card

Documentation System

A modern documentation platform

Image Card Grid

Use ImageCardGrid to display multiple cards in a responsive grid:

Fast Search

Lightning-fast full-text search

MDX Support

Write with React components

Dark Mode

Beautiful dark theme

Aspect Ratios

Video (16:9)

Square (1:1)

Portrait (3:4)

Props

ImageCard

Prop	Type	Default	Description
`src`	`string`	required	Image source URL
`alt`	`string`	required	Accessible alt text
`title`	`string`	-	Card title
`description`	`string`	-	Card description
`href`	`string`	-	Link URL (makes card clickable)
`external`	`boolean`	`false`	Opens link in new tab
`aspectRatio`	`"square" \| "video" \| "portrait"`	`"video"`	Image aspect ratio

ImageCardGrid

Prop	Type	Default	Description
`children`	`ReactNode`	required	ImageCard components
`cols`	`1 \| 2 \| 3 \| 4`	`3`	Number of columns