Margin image
The float pulled entirely clear of the column — the picture sits in the margin and the text never re-flows at all.
Margin left
Full page preview ↗The picture sits in the margin the measure leaves, and the copy is untouched — every line as long as it would be with no picture on the page.
A margin image is a float whose whole width has been pulled out of the column, so it takes no room in the line at all. Read this paragraph and the one below it against the float above: those lines shorten around the picture, and these do not. The measure is exactly what it would be on a page with no picture at all.
That makes it the arrangement for a picture that supports the reading rather than interrupting it — a reference, a specimen, a piece of evidence the reader glances at and returns from without losing their place in the sentence.
It needs a margin to sit in, which means it needs a band wider than its column. In the documentation column there is no such room, so what you see here is the fallback; open the full page preview to see the picture take the margin.
<section class="mk-section mk-figures">
<div class="mk-container mk-container--prose">
<div class="mk-figures__col">
<figure class="mk-figure mk-figure--margin-image mk-figure--left">
<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 mk-rounded-md">
<figcaption>Everlasting, 2026.</figcaption>
</figure>
<div>
<p>A margin image is a float whose whole width has been pulled out of the column, so it takes no room in the line at all. Read this paragraph and the one below it against the float above: those lines shorten around the picture, and these do not. The measure is exactly what it would be on a page with no picture at all.</p>
<p>That makes it the arrangement for a picture that supports the reading rather than interrupting it — a reference, a specimen, a piece of evidence the reader glances at and returns from without losing their place in the sentence.</p>
<p>It needs a margin to sit in, which means it needs a band wider than its column. In the documentation column there is no such room, so what you see here is the fallback; open the full page preview to see the picture take the margin.</p>
</div>
</div>
</div>
</section>arrangement: margin-image
side: left
image: /assets/img/everlasting.jpg
alt: A field of colour, laid down in oil and cold wax
caption: Everlasting, 2026.
body: <p>A margin image is a float whose whole width has been pulled out of the column, so it takes no room in the line at all. Read this paragraph and the one below it against the float above: those lines shorten around the picture, and these do not. The measure is exactly what it would be on a page with no picture at all.</p><p>That makes it the arrangement for a picture that supports the reading rather than interrupting it — a reference, a specimen, a piece of evidence the reader glances at and returns from without losing their place in the sentence.</p><p>It needs a margin to sit in, which means it needs a band wider than its column. In the documentation column there is no such room, so what you see here is the fallback; open the full page preview to see the picture take the margin.</p>Margin right
Full page preview ↗The same, in the other margin. Side is the only choice this arrangement carries beyond the arrangement itself.
The right margin, which is the one a left-to-right reader leaves rather than the one they return to. A picture there is glanced at on the way out of the line instead of on the way in, and it interrupts even less than the left — which is either what you want or the reason to use the left.
Everything else is identical. The float is pulled clear by its own width plus the gutter, so the copy keeps the whole measure and the picture keeps its full size.
<section class="mk-section mk-figures">
<div class="mk-container mk-container--prose">
<div class="mk-figures__col">
<figure class="mk-figure mk-figure--margin-image mk-figure--right">
<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 mk-rounded-md">
<figcaption>Everlasting, 2026.</figcaption>
</figure>
<div>
<p>The right margin, which is the one a left-to-right reader leaves rather than the one they return to. A picture there is glanced at on the way out of the line instead of on the way in, and it interrupts even less than the left — which is either what you want or the reason to use the left.</p>
<p>Everything else is identical. The float is pulled clear by its own width plus the gutter, so the copy keeps the whole measure and the picture keeps its full size.</p>
</div>
</div>
</div>
</section>arrangement: margin-image
side: right
image: /assets/img/everlasting.jpg
alt: A field of colour, laid down in oil and cold wax
caption: Everlasting, 2026.
body: <p>The right margin, which is the one a left-to-right reader leaves rather than the one they return to. A picture there is glanced at on the way out of the line instead of on the way in, and it interrupts even less than the left — which is either what you want or the reason to use the left.</p><p>Everything else is identical. The float is pulled clear by its own width plus the gutter, so the copy keeps the whole measure and the picture keeps its full size.</p>When to reach for it
Reach for a margin image when the picture supports the reading rather than interrupting it: a reference, a specimen, a small piece of evidence the reader glances at and returns from without losing their place. It is the only arrangement that can sit beside a paragraph without changing how that paragraph reads.
How it works
Still a float — the same mechanism as the other two — but its whole width plus the gutter is pulled out, so its box lies wholly outside the measure and shortens no line. That is the part worth taking away: a float pulled clear of the column costs the text nothing, which is how a margin figure works without absolute positioning and without a positioned ancestor to hang from. The pull is written as the width plus the gutter in one expression, so the two can never drift apart.
Where it steps down
Under 75rem of band there is no margin to sit in, so the figure returns to the flow as a plate above the copy. Never as a float: the promise of this arrangement is that the text does not re-flow, and a fallback that re-flows would be a different arrangement wearing the same name. The documentation column is narrower than that threshold, so the specimens above are showing the fallback — open Full page preview on either to see the picture take the margin.