Skip to content

PatternsContent patternsFigure breakout

Figure breakout

A figure that breaks out of the prose column. Used for hero images and full-bleed diagrams.

Up to 1.5x the column width1 per case study, max

Anatomy

A breakout is a figure that exceeds the 42 rem reading column. It is allowed to extend up to 80% of the canvas width (72 rem on desktop). Breakouts are reserved for figures that need the extra room — hero screenshots, full-bleed diagrams, and gallery-style case study images.

Rules of thumb

  • One breakout per case study, maximum. Two breakouts break the reading column.
  • Breakouts always have a caption. The caption sits in the 42 rem column, not under the breakout.
  • Breakouts are always above the fold on desktop, or just below the fold on mobile.
  • Breakouts never have text inside the image. The image is the image; the text is the prose.

The skeleton

tsx
<div className="ds-figure-breakout">
  <Figure chrome="browser" src="/case-study/hero.png" title="..." />
</div>
<p className="ds-figure-breakout__caption">Caption goes in the prose column.</p>

What not to do