---
title: "Figure width"
description: "Break a figure out of its column to the container width, the full viewport or the edges of its card."
requested_language: fr
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/fr/styling/figure-width
version: unreleased (main)
docs_index: https://docs.systhema.app/fr/llms.txt
---
> This page isn't translated yet. Showing English.


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`](https://docs.systhema.app/fr/components/figure.md) component's `width` prop renders them, and the Payload media blocks offer the same choice to editors.

## Quick reference

| Class                | Breaks out to                                | `Figure` prop       |
| -------------------- | -------------------------------------------- | ------------------- |
| none                 | stays in its column                          | `width="default"`   |
| `figure-w-container` | the container width                          | `width="container"` |
| `figure-w-screen`    | the full viewport width                      | `width="screen"`    |
| `figure-w-card`      | the inner edges of its card (alias `w-card`) | `width="card"`      |
| `figure-w-full`      | deprecated alias of `figure-w-screen`        | –                   |

The generated rules:

<!-- generated:utilities figure -->

| Class                | Styles                                                                                                                                                                                                                                                                      |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `figure-w-container` | `width: min(var(--container-width), 100vw);`<br>`max-width: 100vw;`<br>`margin-left: calc((100% - min(var(--container-width), 100vw)) / 2);`<br>`margin-right: calc((100% - min(var(--container-width), 100vw)) / 2);`<br>`margin-block: 0;`                                |
| `figure-w-screen`    | `.py-section:where(:has( > .container > .richtext > .figure-w-screen:first-child,  > .container > .richtext > .figure-w-full:first-child,  > .container > .figure-w-screen:first-child,  > .container > .figure-w-full:first-child)) { padding-top: 0; }`<br>+ 2 more rules |
| `figure-w-full`      | `.py-section:where(:has( > .container > .richtext > .figure-w-screen:first-child,  > .container > .richtext > .figure-w-full:first-child,  > .container > .figure-w-screen:first-child,  > .container > .figure-w-full:first-child)) { padding-top: 0; }`<br>+ 2 more rules |
| `figure-w-card`      | `& { width: calc(100% + var(--card-width-offset-x, 0px) * 2); max-width: calc(100% + var(--card-width-offset-x, 0px) * 2); margin-inline: calc(var(--card-width-offset-x, 0px) * -1); border-radius: 0; }`<br>`& :is(.media, .media-wrapper) { border-radius: 0; }`         |
| `w-card`             | `& { width: calc(100% + var(--card-width-offset-x, 0px) * 2); max-width: calc(100% + var(--card-width-offset-x, 0px) * 2); margin-inline: calc(var(--card-width-offset-x, 0px) * -1); border-radius: 0; }`<br>`& :is(.media, .media-wrapper) { border-radius: 0; }`         |

<!-- /generated -->

## Basic usage

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 width

`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.

```tsx preview iframe bleed height=560 title="figure-w-container"
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 width

`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`](https://docs.systhema.app/fr/styling/section-spacing.md#full-bleed-figures), it also removes the band's padding on that side.

```tsx preview iframe bleed height=560 title="figure-w-screen"
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 width

`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.

```tsx preview iframe height=520 title="figure-w-card"
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 variants

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.

## Customizing

`figure-w-container` reads `--container-width`, so it changes with the container tokens ([Container](https://docs.systhema.app/fr/styling/container.md#customizing)). `figure-w-card` reads the `--card-width-offset-x` variable each card class publishes from its `padding-x` token ([Spacing and sizing](https://docs.systhema.app/fr/reference/tokens/spacing.md#card)). `figure-w-screen` always uses the viewport width. `blocks.figure: false` removes these classes.

## Related

- [Figure](https://docs.systhema.app/fr/components/figure.md)
- [Card](https://docs.systhema.app/fr/components/card.md)
- [Container](https://docs.systhema.app/fr/styling/container.md)
- [Section spacing](https://docs.systhema.app/fr/styling/section-spacing.md)