# Proof strip

> A full-bleed band holding a narrow 34rem ribbon of four portrait frames stacked one under another, each ruled off by a hairline and captioned with a tracked title and one short line. The rest of the page width is left as air on both sides, so the section reads as a photo essay rather than a grid. Includes replaceable example images. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/proof-strip.html
Section: Gallery
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: group, image, paragraph
Keywords: gallery, photo essay, narrow, ribbon, captions, portrait, four up

## Variations (2)

### Paper proofs (the default)

Identical markup in every theme.

The band is your base colour with your contrast as the type, and the ribbon is held at 34rem in the middle of it. Four 4:5 frames, each with a hairline above it in your text colour and a two-line caption under it. On a phone the 34rem measure is already wider than the screen, so the ribbon simply fills it and the composition is unchanged.

### Ink proofs

Identical markup in every theme.

The band inverts: your contrast as the ground, your base as the type, including every caption title. The ribbon, its measure, its four frames and its hairlines are identical, so the strip reads as a set of prints laid out on a dark table.


---

## The signature moment: the gallery refuses the page's width

Every other gallery in this library spends the full 1240px measure it is
given. This one takes 34rem of it and leaves the rest as air on both sides,
so on a wide screen the section is a narrow ribbon of pictures with a great
deal of nothing around it. That restraint is the design, and it is the reason
the pattern reads as a photo essay rather than a grid: a single column of
portraits at a reading measure is how a magazine sets pictures that are meant
to be looked at in order, and a grid is how a site sets pictures that are
meant to be scanned.

It survives colourlessness because the device is **measure and emptiness**.
There is no wash, no tint and no accent anywhere in it; the only marks are
`currentColor` hairlines and the type itself. Take every colour away and the
ribbon is still narrow and the band is still empty, which is the whole
argument. Invert the band, as the variation does, and the argument is
untouched.

**What happens at 390px.** Nothing. The 34rem measure is already wider than a
phone, so the ribbon simply becomes the full width of the band and the pattern
looks the way it was designed to look all along: one column of portrait frames,
each ruled off and captioned, read top to bottom. This is the only gallery in
the set whose composition is UNCHANGED by the stack, and it is unchanged for
the same reason it is unusual on a desktop. There is no `core/columns` anywhere
in the pattern, so there is nothing for core's 782px breakpoint to restack.

## The mechanic, and the one that was refused

The narrow measure is held by a **nested constrained group**: the outer
`align: full` band is `{"layout":{"type":"constrained","contentSize":"1240px"}}`,
and its single child is a `core/group` with
`{"layout":{"type":"constrained","contentSize":"34rem"}}`. No
`justifyContent`, so the layout's own `margin-inline: auto` centres it in the
band.

It is NOT held with `padding-right: max(0rem, 100% - 34rem)`. That was
measured: `content-columns` shipped it on a direct child of a constrained
band, and nothing caught it while the block sat 144px out of line at 1400px,
because the block is `content-box` and the padding therefore sits outside the
layout's `max-width`. The block grows to the band's full width and centring
puts its left edge at the band's padding edge. What gets measured is a width,
and the width was right; the position was not.

The hairlines are **per-side top borders on each entry group**
(`border.top`, `currentColor`, `solid`, `1px`), never `core/separator`, which
Twenty Twenty-Four narrows to a centred stub unless it carries
`is-style-wide`. `currentColor` cannot blank, needs no chain, and follows
whatever text colour the band carries, so the rule is exactly as dark as the
caption beside it in both the base and the inverted variation.

## What it inherits, what it decides

Inherits: every colour (the band is a `base` chain with `contrast` type; the
variation is the inverse; the hairlines are `currentColor`), the typeface, and
the spacing scale (`spacing|80` above and below the band, `spacing|50` between
the intro and the first entry and between entries, `spacing|40` between a
hairline and the frame under it, `spacing|30` between a frame and its caption,
`spacing|20` inside the intro).

Decides: the 34rem measure, which is the pattern; the 1240px band the ribbon
sits inside and the `clamp(1.25rem, 4vw, 4rem)` gutters that keep it off the
viewport edge on a phone; the 4:5 portrait crop on all four frames, set with
`aspectRatio` and `"scale":"cover"` so the buyer's uploads are cropped to the
proportion rather than setting it; the proportion of the type, a 13px tracked
caps title against a 15px to 17px line at 1.55; and the hairline above every
entry including the first, so the ribbon opens with a rule under the intro
rather than drifting into the pictures.

## What a buyer changes first

The photographs. **All four image blocks include example photographs**; choose Replace to select an image from your media library, and the 4:5
crop is already set. Portraits suit it; a landscape upload will be cropped
hard to the ribbon's proportion, which is the point of `scale: cover`.

The captions are the second thing. Each title is caps with 0.2em tracking and
reads best under about 30 characters, and each line should be long enough to
wrap once at 34rem so the entry has two lines of caption under its frame.

The measure is the third thing, and it is one number: the inner group's
`contentSize`. Widening it past about 40rem loses the signature, because the
air on either side is the design; narrowing it below about 28rem starts to
crop the captions into columns of three or four words.

## Variations

- **Ink proofs**: the band inverts, `contrast` ground and `base` type
  throughout, including every caption title. The ribbon, its 34rem measure,
  its four frames and its hairlines are identical to the base; only the
  colour relationship changes, so the strip reads as a set of prints laid on a
  dark table. The hairlines need no edit, because `currentColor` follows the
  type into the inversion by itself.

## Included images

The copied markup includes WordPress Photo Directory example photographs. The public image URLs
keep the examples visible after pasting. Select an image or cover and choose
**Replace** to use your own Media Library files. See [image credits](/image-credits/)
for the sources and licenses. Pasting an image URL does not import a Media Library
attachment.
