Full-bleed break

A section that escapes the page gutter entirely to run edge-to-edge, used to reset the reader's rhythm between text passages.

Grade: ARuntimes: cssStatus: code-only

Documented, no live demo yet — the code below is complete.

Intent

Long text passages flatten. A full-bleed image or colour field between them acts as a paragraph break at the scale of the page — it costs a screen of scroll and buys back attention for the passage that follows.

Implementation

`svh` keeps mobile browser chrome from causing a jump when the URL bar collapses.

Dependencies: none

html-css-js

<figure class="bleed-break">
  <img
    src="/media/process.jpg"
    alt=""
    width="2400"
    height="1350"
    loading="lazy"
    decoding="async"
  />
  <figcaption class="t-caption">Fig. 04 — Process</figcaption>
</figure>

<style>
.bleed-break {
  grid-column: 1 / -1;
  margin-block: var(--space-xl);
  margin-inline: calc(var(--gutter) * -1);
  width: calc(100% + var(--gutter) * 2);
}

.bleed-break img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 85svh;
  object-fit: cover;
}

.bleed-break figcaption {
  padding-inline: var(--gutter);
  margin-top: var(--space-sm);
  opacity: 0.6;
}
</style>

Use it when

Between two long text sections that would otherwise read as one.
As the transition into a case study's results section.

Avoid it when

More than roughly once per two screens of scroll — the reset stops resetting.
When the media is low resolution; edge-to-edge is unforgiving.

Accessibility

Decorative bleed media takes `alt=""`; meaningful media takes a real description.
If text overlays the media, add the `--veil` scrim and verify contrast against the lightest pixel, not the average.

Performance

Set `width`/`height` attributes or `aspect-ratio` to reserve space and avoid layout shift.
Use `loading="lazy"` below the fold and `fetchpriority="high"` only on the first bleed above the fold.

Knobs

aspect: Aspect ratio of the bleed block. Default: 16 / 9
height cap: Maximum viewport height so tall screens do not get a wall. Default: 85svh

Composition

Pairs with

Conflicts with

None.

Instruction for Claude Code

Add a full-bleed figure that escapes the page gutter with negative inline margins. Constrain the image with aspect-ratio 16/9 and max-height 85svh, object-fit cover, explicit width/height attributes to reserve space, and lazy loading below the fold. Put the caption back inside the gutter. Use alt="" if the image is decorative.