Skip to content
Site volume
Colourway

Components

Figure

Media with a caption and credit; space reserved by aspect ratio; proofs stay untouched.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/figure
On this page

Example#

Look of this example
Pebblepath's hero on a phoneMei Tanaka
Live render of examples/figure/basic.tsx

Usage#

Use a figure for an image or a diagram with a caption. aspectRatio reserves its space before the image loads, so nothing shifts.

  • treatment says what the image is: proof for a screenshot or a photo that must stay untouched (D-I1), print for an image already treated by the photo pipeline or the print kit. A figure never filters a proof.
  • Caption and credit. The caption says what the image shows; credit names who made it.
  • Client sites go in a ScreenshotFrame, which links out to the live site.

Anatomy#

Pebblepath's hero on a phoneMei Tanaka
The parts of examples/figure/basic.tsx, numbered:
  1. Mediadata-mk-part="media"
  2. Captiondata-mk-part="caption"

Volume#

Reading layer: identical at every volume. Proof images never change with the volume.

  • Quiet

    Pebblepath's hero on a phoneMei Tanaka

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    Pebblepath's hero on a phoneMei Tanaka

    The site default. Art on its own plates, one display moment per view.

  • Press

    Pebblepath's hero on a phoneMei Tanaka

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Pebblepath's hero on a phoneMei Tanaka

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • The caption adds what the image cannot say: where, when, what changed.
  • Alt text on the image describes it for people who cannot see it; the caption is for everyone.

Do and don't#

Do

Pebblepath's hero on a phoneMei Tanaka

Proof stays untouched.

Don't

A client's screenshot run through the halftone filter to match the page.

Proof printed over.

Screenshots and real results are evidence (D-I1). Treating them makes them look less true; treat only photos that are illustration.

Accessibility#

  • Give the image its own alt text; the caption adds context, it does not replace it.
  • Proof images are never filtered (D-I1).

Props#

PropTypeDefaultDescription
children requiredReactNodenoneThe media.
captionReactNodenone
creditReactNodenone
aspectRatiostringnonee.g. "16 / 9": reserves the media's space.
treatment"print" | "proof"proofDefault `proof` (untouched).

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from FigureProps in packages/overprint-react/src/reading/figure/figure.tsx.

Tokens#

System tokens (4)

Scanned from its CSS at build and checked against its registry entry; 1 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry