Image

Centers an image, rounds its corners, and constrains its width to size — a percentage or pixel value applied at full screen width, that still shrinks on a narrower viewport like any other content:

<Image src="/images/card-demo.svg" size="60%" alt="Example image" />

Set caption and the image gains a bordered, rounded card background — the image sits inset inside it, with the caption text centered underneath, inside the same card:

<Image
  src="/images/card-demo.svg"
  size="60%"
  alt="Example image"
  caption="An example image, with a caption"
/>

Image props

srcstringrequired

Image path or URL.

srcDarkstring

Shown instead of src when the site is in dark mode; omit it and src is used in both modes.

sizestringdefault: 100%

A CSS width ("80%", "480px", …) applied at full screen width.

altstringdefault: empty (decorative) alt

captionstring

Omit it and the image renders with no card background at all, exactly like before this prop existed.

Zoom

Every content image — one rendered by Image above, wrapped in a Frame, a raw <img>, or plain markdown ![]() syntax — is clickable by default and opens in a fullscreen lightbox (click anywhere, press Esc, or use the close button to dismiss it). Add noZoom to opt a specific image out:

<Image src="/images/card-demo.svg" size="60%" alt="Example image" noZoom />

<img src="/images/card-demo.svg" alt="Example image" noZoom />

noZoom works the same way on a raw <img> tag, not just Image. It doesn’t apply to Card’s own image (its header art, not standalone content) or to Icon’s src variant (a small inline glyph).