Figure

Semantic figure with image + caption + optional click-to-expand lightbox.

stable display #image#semantic#accessibility

A serene mountain lake at dusk. — A short caption describing the image.

Loading preview…

Usage

- Use for blog post images, case-study images, anywhere caption + image semantic structure matters. - Set `expandable={false}` for thumbnails or anywhere a lightbox would be jarring (small icons, decorative images). - Always provide alt text. - Don't nest figures inside other figures — semantically invalid.

Do / Don't

- **Do** provide alt text describing the image, not "image of X". - **Do** keep captions short — under 20 words. - **Don't** use for decorative images (use a styled `<img>` directly). - **Don't** override the lightbox's keyboard handling (Escape should always close).

Tokens

color.bone — #F5F1EC
color.elevated — #1A1210
space.4 — 1rem
radius.md — 8px

ParallaxImage

A11y

Uses semantic <figure> + <figcaption>. Alt text required (TS-enforced). Lightbox closes on Escape, click-outside, and dedicated close button. Focus trapped in lightbox while open.

Source

src/components/Figure.tsx

Live playground