Figure

Display an image in a consistent frame, or reserve space for artwork still in production.

import photo from "../assets/photography/photo-01.jpg";

<Figure
  src={photo}
  alt="An example photograph shown inside the brand's image frame"
  caption="Photography application"
  ratio="3 / 2"
  fit="contain"
/>

Usage

Import an image. Supply meaningful alt text when the image conveys information; leave it empty for decorative artwork.

import photo from "../assets/photography/photo-01.jpg";

<Figure
  src={photo}
  alt="A photograph demonstrating the brand's image treatment"
/>

This import assumes a document at the content root. Use your own asset and adjust the path for nested or localized pages. Imported images use Astro’s responsive image pipeline. A string src, such as a path under public/, produces an ordinary lazy-loaded image instead.

Examples

Keep the whole image visible

Use fit="contain" with an imported image to preserve the full composition. This uses Astro’s responsive image pipeline.

import photo from "../assets/photography/photo-01.jpg";

<Figure
  src={photo}
  alt="An example photograph shown inside the brand's image frame"
  caption="Photography application"
  ratio="3 / 2"
  fit="contain"
/>

Fill the frame with a crop

Use fit="cover" to fill a different aspect ratio. Passing the imported image’s src string demonstrates the plain-image path, which renders a lazy-loaded img rather than Astro’s responsive Image.

import photo from "../assets/photography/photo-01.jpg";

<Figure
  src={photo.src}
  alt="A photograph cropped to a square frame"
  ratio="1 / 1"
  fit="cover"
  caption="Square crop using an image URL"
/>

Set the unused frame background

With contain, a differently shaped frame leaves space around the image. bg selects a generated palette shade so that space follows the configured brand.

import photo from "../assets/photography/photo-01.jpg";

<Figure
  src={photo}
  alt="A photograph fitted inside a wide frame"
  ratio="16 / 9"
  fit="contain"
  bg={
    props.brand.colors.palette[0]
      ? `${props.brand.colors.palette[0].id}-50`
      : undefined
  }
  caption="The full photograph with a configured palette background"
/>

Reserve space for pending artwork

Omit src while preparing a mockup. Set ratio to the intended shape and use caption to identify the planned application.

<Figure ratio="9 / 16" caption="Mobile layout — artwork pending" />

Use the localized pending label

Omit both src and caption for a neutral placeholder with the current interface’s artwork-pending label.

<Figure ratio="3 / 1" />

Image behavior

cover fills the frame and can crop the image; contain keeps the whole image visible, as shown in the default preview. The default ratio applies to images and placeholders alike.

An empty frame displays its caption, or the localized artwork-pending label when no caption is provided. A nonempty caption also renders below the frame. bg selects a generated CSS custom property directly; unlike Panel.bg, it does not validate the token. The component has no content slots.

API reference