ImageCard
A single image tile for a media grid. The full image loads lazily — only once the tile nears the viewport (built on useIntersectionObserver) — showing a skeleton until it…
A single image tile for a media grid. The full image loads lazily — only once the tile
nears the viewport (built on useIntersectionObserver) — showing
a skeleton until it arrives and fading in on load. If src fails it tries fallback, then
shows an error placeholder:
ImageCard(
src = thumbUrl,
alt = "Sunset over the bay",
ratio = "16/9", // reserves space so the grid doesn't reflow
fit = ImageFit.Cover, // Cover | Contain | Fill | ScaleDown
badge = Some(span("4K")), // a corner tag
overlay = Some(downloadButton), // hover content
onClick = () => open(fullUrl),
)
ratio is a CSS aspect-ratio ("16/9", "1/1"); fit controls cropping; rounded
(default true) rounds the corners; lazyLoad = false opts out of deferred loading.
State is mirrored to data-state (loading/loaded/error) and data-inview. It is the
canonical cell for a Masonry or grid
layout.