Figure

learning · static (no JavaScript) · no children. All components: component playground.

Description for the model

Image with caption, click to zoom.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "Figure",
  "props": {
    "image": {
      "src": "/og-image.png",
      "alt": "A pour-over coffee brewing on a scale",
      "width": 1200,
      "height": 630
    },
    "caption": "Pour-over at the 30-second bloom."
  }
}

Props

Prop	Type	Required	Notes
image	object	yes	An image with explicit size (prevents layout shift)
image.src	string (href)	yes	Image URL (local /images/… or the tenant storage). max length 2048
image.alt	string	yes	Text alternative; empty string only for decorative images. max length 300
image.width	integer	yes	Intrinsic width in px. ≥ 1
image.height	integer	yes	Intrinsic height in px. ≥ 1
caption	string		Caption. max length 300
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Pour-over at the 30-second bloom.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "image": {
    "src": "/og-image.png"
  }
}

Issues:

• /image/alt is required
• /image/width is required
• /image/height is required

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 13 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.