Image | Components

::image places an image in a column, a card or a grid cell. For a full-height image, use the image-left, image-right or image layouts.

Live demo

Click the deck, then use ← → · 2 slides · 00:07Open fullscreen →

Markdown
::image{src=./photo.svg alt="Purple gradient" fit=cover}

Markdown (image layout)
--- layout=image-right image=./photo.svg alt="Abstract purple illustration"

# Full-height image

MDX
<Image
  src="./photo.svg"
  alt="Purple gradient"
  fit="contain"
  caption="Lorem ipsum"
/>

Attribute	Type	Default	Description
`src`	`string`	—	Image path or URL
`alt`	`string`	—	Required for accessibility
`fit`	`cover \| contain`	`cover`	How the image fills its box
`caption`	`ReactNode` (MDX)	—	Text shown under the image

Local images are copied into the build, or embedded in the single-file HTML export.

Format	Status	Notes
`deck`	Available	Rendered in slides, the presenter console and the HTML and PDF exports.
`docs`	Available	Through <StoryEmbed slug="…" /> in any page of a site.
`motion`	Available	Animated block in a film.
`report`	Planned · P6	Section of a paged report.
`toon`	Planned · P7	Panel of a vertical strip.
`book`	Planned · P8	Block of a printable chapter.

Last modified on October 29, 2026