Mark · Patterns

Figures

Copy with a picture in it — the sibling of prose, which is copy alone. arrangement names where the figure sits relative to the reading measure: plate gives the picture its own turn at the full measure, image-float floats it in the copy and the lines shorten around it, hanging-image floats it half out into the margin so they shorten by less, margin-image puts it wholly in the margin where the text never re-flows at all, bleed-image gives up the column entirely and spans the band. How wide that measure is stays the band's own width field, never the arrangement's.

These are full-width bands, so the specimens below are cramped by the documentation column. Use Full page preview on any example to see it own the viewport.

One question behind the axis: how far out of the reading measure does the picture reach? That is why the measure is a field on this band and not a detail — set width and you have set what “outside the column” means for every arrangement.

plate — The picture takes its own turn at the full measure — no float, no re-flow. The zero rung, and what you get by not choosing.
image-float — The picture floats in the copy and the lines shorten around it — the print tradition, and the one layout job neither flex nor grid can do.
hanging-image — The same float, pulled part of the way out — the picture hangs half in the margin, so the lines shorten by less than its width.
margin-image — The float pulled entirely clear of the column — the picture sits in the margin and the text never re-flows at all.
bleed-image — The picture gives up the column and spans the whole band — full width, no float, nothing to wrap.

Plate

Full page preview ↗

The picture takes its own turn at the full measure — no float, no re-flow. The zero rung, and the arrangement you get by not choosing one.

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

A plate is the picture given its own turn in the flow. The column keeps its measure, the text keeps its rhythm, and the reader stops at the picture on the way past rather than reading around it.

Nothing here is doing anything clever, which is the point: a figure that needs no arrangement should not be given one.

<section class="mk-section mk-figures">
  <div class="mk-container mk-container--prose">
    <div class="mk-figures__col">
      <figure class="mk-figure mk-figure--plate">
        <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 plate is the picture given its own turn in the flow. The column keeps its measure, the text keeps its rhythm, and the reader stops at the picture on the way past rather than reading around it.</p>
        <p>Nothing here is doing anything clever, which is the point: a figure that needs no arrangement should not be given one.</p>
      </div>
    </div>
  </div>
</section>

arrangement: plate
image: /assets/img/everlasting.jpg
alt: A field of colour, laid down in oil and cold wax
caption: Everlasting, 2026.
body: <p>A plate is the picture given its own turn in the flow. The column keeps its measure, the text keeps its rhythm, and the reader stops at the picture on the way past rather than reading around it.</p><p>Nothing here is doing anything clever, which is the point: a figure that needs no arrangement should not be given one.</p>

Float left

Full page preview ↗

The picture floats in the copy and the lines shorten around it. Set the band's width to say how wide a column it floats in — this specimen keeps the reading measure.

A floated figure sits inside the column and the text re-flows around it, shortening for as long as the picture lasts and then returning to the full measure. It is the one layout job neither flex nor grid can do, and the reason the float property is still worth having.

Nothing is applied to the paragraphs, which is the part that surprises people: the copy stays plain. A float shortens the line boxes of everything after it, so the text needs no wrapper, no column, and no float of its own.

How wide a column it floats in is the band's business, not the arrangement's. Leave the width at the reading measure and the wrapped lines run short; set it wider and the same arrangement reads as a magazine page.

<section class="mk-section mk-figures">
  <div class="mk-container mk-container--prose">
    <div class="mk-figures__col">
      <figure class="mk-figure mk-figure--image-float 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 floated figure sits inside the column and the text re-flows around it, shortening for as long as the picture lasts and then returning to the full measure. It is the one layout job neither flex nor grid can do, and the reason the float property is still worth having.</p>
        <p>Nothing is applied to the paragraphs, which is the part that surprises people: the copy stays plain. A float shortens the line boxes of everything after it, so the text needs no wrapper, no column, and no float of its own.</p>
        <p>How wide a column it floats in is the band's business, not the arrangement's. Leave the width at the reading measure and the wrapped lines run short; set it wider and the same arrangement reads as a magazine page.</p>
      </div>
    </div>
  </div>
</section>

arrangement: image-float
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 floated figure sits inside the column and the text re-flows around it, shortening for as long as the picture lasts and then returning to the full measure. It is the one layout job neither flex nor grid can do, and the reason the float property is still worth having.</p><p>Nothing is applied to the paragraphs, which is the part that surprises people: the copy stays plain. A float shortens the line boxes of everything after it, so the text needs no wrapper, no column, and no float of its own.</p><p>How wide a column it floats in is the band's business, not the arrangement's. Leave the width at the reading measure and the wrapped lines run short; set it wider and the same arrangement reads as a magazine page.</p>

Float right

Full page preview ↗

The same float, the other way. side is the arrangement's only sub-choice, and only a floated arrangement has one.

The same arrangement, floated the other way. Side is the only choice a float carries beyond the arrangement itself, and it is a real one: a picture on the right ends the line and a picture on the left starts it, which changes where the reader's eye lands as each line returns.

How wide a column the float sits in is not part of this choice. That is the band's width field, so the same two specimens read as a magazine page or as a narrow column without either of them becoming a different arrangement.

<section class="mk-section mk-figures">
  <div class="mk-container mk-container--prose">
    <div class="mk-figures__col">
      <figure class="mk-figure mk-figure--image-float 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 same arrangement, floated the other way. Side is the only choice a float carries beyond the arrangement itself, and it is a real one: a picture on the right ends the line and a picture on the left starts it, which changes where the reader's eye lands as each line returns.</p>
        <p>How wide a column the float sits in is not part of this choice. That is the band's width field, so the same two specimens read as a magazine page or as a narrow column without either of them becoming a different arrangement.</p>
      </div>
    </div>
  </div>
</section>

arrangement: image-float
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 same arrangement, floated the other way. Side is the only choice a float carries beyond the arrangement itself, and it is a real one: a picture on the right ends the line and a picture on the left starts it, which changes where the reader's eye lands as each line returns.</p><p>How wide a column the float sits in is not part of this choice. That is the band's width field, so the same two specimens read as a magazine page or as a narrow column without either of them becoming a different arrangement.</p>

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

Hanging left

Full page preview ↗

The float with part of its width pulled into the margin — full presence for the picture, a workable measure for the text.

A hanging image floats like any other, but part of it has been pulled out of the column. The lines still shorten — this is a float, and that is what floats do — but they give up only the part of the picture still standing inside the measure.

That is the trade this arrangement exists to make. Inside a forty-rem column a picture wide enough to be worth looking at leaves the text too narrow to read; hanging a third of it in the margin buys the width back without shrinking the picture.

How far it hangs is not a fixed distance but whatever room the band leaves around the column, up to a ceiling. That is why this specimen hangs a little here and further on the full page — the same arrangement, given more margin to use.

<section class="mk-section mk-figures">
  <div class="mk-container mk-container--prose">
    <div class="mk-figures__col">
      <figure class="mk-figure mk-figure--hanging-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 hanging image floats like any other, but part of it has been pulled out of the column. The lines still shorten — this is a float, and that is what floats do — but they give up only the part of the picture still standing inside the measure.</p>
        <p>That is the trade this arrangement exists to make. Inside a forty-rem column a picture wide enough to be worth looking at leaves the text too narrow to read; hanging a third of it in the margin buys the width back without shrinking the picture.</p>
        <p>How far it hangs is not a fixed distance but whatever room the band leaves around the column, up to a ceiling. That is why this specimen hangs a little here and further on the full page — the same arrangement, given more margin to use.</p>
      </div>
    </div>
  </div>
</section>

arrangement: hanging-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 hanging image floats like any other, but part of it has been pulled out of the column. The lines still shorten — this is a float, and that is what floats do — but they give up only the part of the picture still standing inside the measure.</p><p>That is the trade this arrangement exists to make. Inside a forty-rem column a picture wide enough to be worth looking at leaves the text too narrow to read; hanging a third of it in the margin buys the width back without shrinking the picture.</p><p>How far it hangs is not a fixed distance but whatever room the band leaves around the column, up to a ceiling. That is why this specimen hangs a little here and further on the full page — the same arrangement, given more margin to use.</p>

Hanging right

Full page preview ↗

The same, hanging into the other margin.

Hanging the other way. The column does not move — that is the part worth checking on a page that uses several of these, because a reader scrolling past a run of them should never feel the text drifting left and right underneath them.

What moves is the picture, and only ever outward: the measure it leaves behind is the same measure the paragraph above it had.

<section class="mk-section mk-figures">
  <div class="mk-container mk-container--prose">
    <div class="mk-figures__col">
      <figure class="mk-figure mk-figure--hanging-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>Hanging the other way. The column does not move — that is the part worth checking on a page that uses several of these, because a reader scrolling past a run of them should never feel the text drifting left and right underneath them.</p>
        <p>What moves is the picture, and only ever outward: the measure it leaves behind is the same measure the paragraph above it had.</p>
      </div>
    </div>
  </div>
</section>

arrangement: hanging-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>Hanging the other way. The column does not move — that is the part worth checking on a page that uses several of these, because a reader scrolling past a run of them should never feel the text drifting left and right underneath them.</p><p>What moves is the picture, and only ever outward: the measure it leaves behind is the same measure the paragraph above it had.</p>

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>

Fields (16)

Field	Type	Notes
`eyebrow`	text	small label above the heading
`title`	text
`level`	number	2 for a section, 1 when this band IS the page's title
`lead`	textarea	one emphasized line under the heading
`body`	wysiwyg
`image`	text	the figure's source; with no image the band is simply prose
`alt`	text	empty when the picture is decorative — the caption is not alt text
`caption`	text
`arrangement`	text	plate — the picture takes its own turn at the full measure. image-float — it floats in the copy and the text re-flows around it. hanging-image — it floats but hangs half into the margin, so the lines shorten by less. margin-image — it sits in the margin beside the copy and the text never re-flows. bleed-image — it spans the whole band, full width.
`side`	text	left or right, for the arrangements that have a side — image-float, hanging-image and margin-image. A plate is centred by definition, so a side on it is not a narrower choice but a meaningless one.
`surface`	text	empty, muted, subtle, primary, or dark
`width`	text	A rung on the container ladder — full-bleed · fluid · container · inset · prose, widest to narrowest. The measure this band sets is what every arrangement is measured against.
`id`	text
`shape_bottom`	group	Cuts the band's BOTTOM edge. The shape is painted in this band's own ground and hangs over the band below, so the band below declares nothing.
`shape_top`	group	The same, on the band's TOP edge — it hangs upward over the band above.
`class_names`	text

Figures

Plate

Float left

Float right

Bleed

Hanging left

Hanging right

Margin left

Margin right

On this page