Skip to content

Image

A consistent image block with fixed ratios, captions, and shared states.

Ratios

Default cover image in a square frame — Square (1:1)

Default cover image in a standard frame — Standard (4:3)

Default cover image in a widescreen frame — Widescreen (16:9)

Default cover image in a cinema frame — Cinema (21:9)

Usage notes

Use ratios to standardize cropping across a layout.
Widescreen is best for hero media and screenshots.
Square works well for avatars and thumbnails.

Sizes

Widescreen image in full width — Full width

Square image in extra small size — XS

Square image in small size — SM

Square image in medium size — MD

Square image in large size — LG

Usage notes

Use smaller sizes for dense tables or compact cards.
Default works for most UI contexts.
Full width is best for section-level media.

Skeleton

Standard image with static skeleton — Static

Standard image without skeleton — None (default)

Usage notes

Default is none (no skeleton).
Static keeps a calm placeholder on refresh.

Empty and error

No cover image

Empty (no src)

Image unavailable

Unavailable (no src)

Usage notes

Use empty state when no image is provided.
Provide a clear empty label for clarity.
Unavailable sources should render the same empty frame.

Framing

Image with rounded frame — Dashed + rounded frame

Image with contained fit — Contained image

Usage notes

Use frameClassName to adjust borders and radius.
Use imageClassName for fit and presentation tweaks.
Keep visual treatments consistent per section.