Atelier — Component catalog & studio

Video aspect

hoverPolish — frame shadow, border, and photo zoom on hover or focus.

Overlay title (hover polish)

Visible caption with frame lift and a slight caption nudge on hover.

Overlay title + description

Overlay on hover

overlayOnHover — caption fades and slides up on hover or keyboard focus (uses panel motion tokens).

Overlay on hover + zoom

Hover zoom only

Caption below

Square

Wide cinematic

Auto height

Broken source (fallback)

Empty source (fallback)

Upload a cover image

Popup view

popupView — click to open a dialog lightbox. Pass popupSlides + popupIndex for ← → navigation between siblings.

Custom fallback label

API

Prop	Required	Type	Default	Description
alt	Optional	string	""	Alternative text for the image.
src	Optional	string	—	Image URL; omit or break to show fallbackLabel.
aspectRatio	Optional	square \| video \| wide \| auto	auto	Layout preset.
fallbackLabel	Optional	string	Image unavailable	Copy when src is missing or fails to load.
title	Optional	string	—	Caption title (overlay, below, or lightbox dialog).
description	Optional	string	—	Secondary caption line.
overlay	Optional	boolean	—	Bottom gradient with title/description on image.
overlayOnHover	Optional	boolean	—	Reveal overlay on hover/focus (with overlay).
hoverZoom	Optional	boolean	—	Photo scale-up on hover/focus.
hoverPolish	Optional	boolean	—	Frame shadow/border lift and photo zoom; nudges visible overlay copy.
captionBelow	Optional	boolean	—	Title/description under the frame.
previewLoading	Optional	boolean	—	Keep the loading skeleton visible (docs / placeholders).
popupView	Optional	boolean	—	Click thumbnail to open a dialog lightbox with the full image.
popupSlides	Optional	ImagePopupSlide[]	—	Sibling slides for ← → navigation while the lightbox is open.
popupIndex	Optional	number	0	Index into popupSlides for this thumbnail.