Figure width

The figure width classes let a figure break out of the column it sits in: to the container width, to the full viewport, or to the inner edges of its card. The Figure component's width prop renders them, and the Payload media blocks offer the same choice to editors.

Quick referenceLink to this section

The generated rules:

Basic usageLink to this section

Each breakout works from inside any narrower ancestor. The first two previews put the figure in a column inset by four grid columns (col-mx-4), the way a Section with padding={4} does; on a phone-width preview the column is full width, so switch to a wider device to see the breakout.

Container widthLink to this section

figure-w-container widens the figure to the container width, centered on its column. Negative side margins let it overflow the column, while the column itself keeps its place in the grid.

export default function Demo() {
  return (
    <div className="grid-default container py-12">
      <div className="col-mx-4">
        <p className="text-body color-body mb-6">
          The text stays in the inset column. The figure below breaks out to the container.
        </p>
        <figure className="figure-w-container">
          <img
            src="/demo-assets/coast.webp"
            alt=""
            className="aspect-video w-full rounded-lg object-cover"
          />
        </figure>
        <p className="text-body color-body mt-6">The column continues after the figure.</p>
      </div>
    </div>
  )
}

Full viewport widthLink to this section

figure-w-screen widens the figure to 100vw, edge to edge. It also squares the corners, drops any shadow and disables the scroll reveal, so a full-bleed image does not pop in. As the first or last child of a band with py-section, it also removes the band's padding on that side.

export default function Demo() {
  return (
    <div className="grid-default container py-12">
      <div className="col-mx-4">
        <p className="text-body color-body mb-6">The figure below runs edge to edge.</p>
        <figure className="figure-w-screen">
          <img src="/demo-assets/mountains.webp" alt="" className="aspect-[21/9] w-full object-cover" />
        </figure>
        <p className="text-body color-body mt-6">The column continues after the figure.</p>
      </div>
    </div>
  )
}

Card widthLink to this section

figure-w-card widens the figure by the card's horizontal padding, so it sits flush with the card's edges. As the first or last child of the card, the card also drops its padding on that side and its rounded corners clip the image. w-card is the same rule under a name for elements that are not figures. Outside a card both do nothing.

export default function Demo() {
  return (
    <div className="flex w-full justify-center">
      <div className="card-default richtext w-full max-w-[360px]">
        <figure className="figure-w-card">
          <img src="/demo-assets/workspace.webp" alt="" className="aspect-[3/2] w-full object-cover" />
        </figure>
        <h3 className="text-h5 color-heading">Northwind studio</h3>
        <p className="text-body color-body">The image eats the card padding; the text keeps it.</p>
      </div>
    </div>
  )
}

With components, write the same thing as <Figure width="card"> inside a Card.

Responsive and state variantsLink to this section

The breakouts follow the container width and the card padding, which change per breakpoint on their own. Breakpoint prefixes work (md:figure-w-container keeps the figure in its column on phones), but a figure's width is usually set once through the Figure component or the editor.

CustomizingLink to this section

figure-w-container reads --container-width, so it changes with the container tokens (Container). figure-w-card reads the --card-width-offset-x variable each card class publishes from its padding-x token (Spacing and sizing). figure-w-screen always uses the viewport width. blocks.figure: false removes these classes.

RelatedLink to this section

• Figure
• Card
• Container
• Section spacing