Figure

Marketing · src/components/Figure/Figure.tsx

A framed picture with a caption.

There is deliberately no bleed prop. Running a picture off the page edge needs to know where that edge is, which is the row's business rather than the figure's - FeatureRow owns --rail-inset and bleeds its own media slot.

Figure carried a bleed prop for months that emitted a class no stylesheet ever defined, so it silently did nothing. Better no prop than a prop that no-ops: the second kind cannot be noticed.

Import

import { Figure } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
src	string
srcSet	string
alt	string
ratio	string	CSS aspect ratio. 16 / 10 by default.
caption	React.ReactNode
credit	React.ReactNode	Who made it, or where it came from.
eager	boolean	Loads immediately. For an image above the fold.
className	string
children	React.ReactNode	Replaces the image entirely - a chart, a diagram, an embed.