Usage

Image objects can appear inline or as block-level media. Start with these tokens:

--image-block-max-width to control breakout width (with mobile/print variants)

--image-title-* tokens to style optional titles above images

--image-caption-* tokens to style captions and alignment

Inline images inherit text flow and are constrained to 1.1em in height, so typography tokens drive their scale.

Tokens

Token	Description	Default Value
`--image-block-max-width`	Maximum width for block images	`var(--content-breakout-width)`
`--image-block-max-width-mobile`	Maximum width on mobile (640px)	`var(--content-breakout-width-mobile)`
`--image-block-max-width-print`	Maximum width in print	`100%`

Token	Description	Default Value
`--image-caption-font-family`	Font family for image captions	`var(--caption-font-family)`
`--image-caption-font-size`	Font size for image captions	`var(--caption-font-size)`
`--image-caption-color`	Text color for image captions	`var(--caption-color)`
`--image-caption-line-height`	Line height for image captions	`var(--caption-line-height)`
`--image-caption-align`	Text alignment for captions	`center`
`--image-caption-spacing-top`	Gap between image and caption	`var(--caption-spacing)`

:root {
  /* No design token overrides */
}

:root {
  --image-caption-align: left;
  --image-caption-font-size: var(--font-size-xs);
  --image-title-align: left;
}

Figure title A brief caption describing the image content.

Inline images align with surrounding text and scale to the line height:

:root {
  /* No design token overrides */
}

The icon appears inline with text.