Skip to content
Jewel

Figure

Magazine-style media with a hairline caption. Pick a shape, and the photo fills it.

CSS
css/components/figure.css

01 — Variants

Wide

.figure--wide is 21:9. Inside a padded panel, .bleed runs it out to the panel’s edges.

Northlight Quarterly — cover system, issue 12.Fig. 1

Shapes

Default 3:2, .figure--square, .figure--tall (4:5), or any ratio with style="--ratio: 16 / 10".

Default, 3:2
Square
Tall, 4:5

With an image

Put an <img> in the media box. It covers the shape; the backdrop shows while it loads.

A red circle on a pale ground
Field Notes — mark study.Fig. 2

02 — Usage

Use it for

  • Photos, artwork and diagrams with a caption.
  • Badges over the media for status: see Badge.

Avoid

  • Decorative images. Use CSS backgrounds.
  • Captions that repeat the alt text.

03 — Accessibility

Notes

  • Alt text describes the image; the caption adds context. They shouldn’t say the same thing.