Mark · Patterns · Figures

Bleed image

The picture gives up the column and spans the whole band — full width, no float, nothing to wrap.

Bleed

Full page preview ↗

The picture gives up the column and spans the whole band — no float, nothing to wrap, the reading stopping for the width of a photograph.

A field of colour, laid down in oil and cold wax
Everlasting, 2026.

A bleed is the loudest thing this band can do. The copy above it ends, the picture takes the full width of the band, and the copy below resumes at exactly the measure it had — nothing wraps, because there is nothing beside the picture to wrap around.

It bleeds to the section rather than to the window, which is a distinction with a consequence: a picture sized in viewport units counts the scrollbar and overshoots the page by its width, and a page that scrolls sideways by fifteen pixels is a bug nobody can find.

<section class="mk-section mk-figures">
  <div class="mk-container mk-container--prose">
    <div class="mk-figures__col">
      <figure class="mk-figure mk-figure--bleed-image">
        <img src="/assets/img/everlasting.jpg" alt="A field of colour, laid down in oil and cold wax" loading="lazy" decoding="async" class="img-fluid">
        <figcaption>Everlasting, 2026.</figcaption>
      </figure>
      <div>
        <p>A bleed is the loudest thing this band can do. The copy above it ends, the picture takes the full width of the band, and the copy below resumes at exactly the measure it had — nothing wraps, because there is nothing beside the picture to wrap around.</p>
        <p>It bleeds to the section rather than to the window, which is a distinction with a consequence: a picture sized in viewport units counts the scrollbar and overshoots the page by its width, and a page that scrolls sideways by fifteen pixels is a bug nobody can find.</p>
      </div>
    </div>
  </div>
</section>
arrangement: bleed-image
image: /assets/img/everlasting.jpg
alt: A field of colour, laid down in oil and cold wax
caption: Everlasting, 2026.
body: <p>A bleed is the loudest thing this band can do. The copy above it ends, the picture takes the full width of the band, and the copy below resumes at exactly the measure it had — nothing wraps, because there is nothing beside the picture to wrap around.</p><p>It bleeds to the section rather than to the window, which is a distinction with a consequence: a picture sized in viewport units counts the scrollbar and overshoots the page by its width, and a page that scrolls sideways by fifteen pixels is a bug nobody can find.</p>

When to reach for it

Reach for a bleed when the picture is the point of the passage rather than an aside to it: a wide scene, a room, a face at scale. It is the loudest thing this band can do, and a page that does it four times has stopped doing it at all — the width is a claim about the photograph, and claims repeat badly.

How it works

No float and no wrap. The picture takes the band's full width and the copy resumes underneath at exactly the measure it had above: 100cqw wide, with half the difference between that and the column taken back on each side, which centres it without needing to know which column it was called in.

It bleeds to the SECTION, not the window, and that is the part worth copying. The obvious way to write this is 100vw, which counts the scrollbar — so on any platform with a classic one the picture overshoots the page and starts a sideways scroll of about fifteen pixels, which is a bug nobody can find. A section is a block box already sized to the page's usable width, so bleeding to it is correct and costs no arithmetic.

Where it steps down

None — a bleed is the same shape at every width, and it is the one arrangement that gets LOUDER as the band narrows, since a picture spanning the whole of a phone screen is already doing exactly what it was asked to do.

It works outside this band too

A figures band is a container already, but a bleed is just as useful inside prose — a post with a photograph between two paragraphs, which is where the dispatch example uses it. A band cannot know in advance that it will hold one, so the rule finds them: the section that HOLDS a bleed becomes the container it bleeds to, and no other band pays for the containment.

Which means the arrangement is markup an author can write into body copy — <figure class="mk-figure mk-figure--bleed-image"> — and it will span whatever band it lands in.

On this page