# Before and after pairs

> Recent work for a builder, a landscaper or a decorator, shown as three static before and after pairs. In each pair the before photograph is square and narrower, the after photograph wider at 3:2, the two cut to the same height so their feet line up, with a Before label over one and an After tag on a solid plate over the other. A ruled caption row under each pair names the job and the place on the left and what was done on the right. No slider and no script: six images and six lines you replace in the editor. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/before-after-pairs.html
Section: Gallery
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0. 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: column, columns, group, heading, image, paragraph
Keywords: before and after, projects, portfolio, builder, landscaper, renovation, trades, recent work

## Variations (2)

### Pairs (the default)

Identical markup in every theme.

Your base ground and contrast type; the After tag is inverted on a contrast plate and each caption row sits under one currentColor rule.

### Limestone and fern

This variation states its own colours and states its own type: identical in every theme.

A landscaper or builder look: states pale limestone, dark green-black type and the After tag on a fern green plate, set throughout in Avenir Next.


---

## The signature moment: the after is the bigger picture

**In every pair the before is a narrower square and the after a wider 3:2
frame, cut to the same height so their feet line up.** The columns are 40 and
60 per cent, and a square at two fifths of the width is exactly as tall as a
3:2 frame at three fifths, so the pair reads as one level strip in which the
result simply takes more room. The scale difference is the argument, and it
survives colourlessness because it is proportion, not paint. The After tag is
the one solid plate on the section; Before is a bare label.

## What it inherits from your theme

- The ground is `base` and all type is `contrast`, each a two-rung chain,
  at 4.5:1 or better in the stock themes.
- The After tag inverts: `contrast` ground, `base` text.
- The label starts on `role-label` and falls through to `contrast`; the
  caption rules are `currentColor`.
- The heading is off the type ladder on purpose, a bare
  `clamp(2.75rem, 6vw, 6rem)`. Caption titles are the second mass at
  `clamp(1.25rem, 1.8vw, 1.75rem)`; body copy takes `medium`. The typeface is
  your theme's.

## What it decides for itself

- Each pair is a `core/columns` block that does not stack on a phone, so
  Before and After stay side by side at 390px; the heading row above it does
  stack below 782px.
- Type never sits on a photograph: both tags sit above their frames.

## The Styled look

`limestone-and-fern` states pale limestone `#efeadf`, dark green-black
`#1d2a1f` type and rules, and the After tag on a fern green `#3f6b35` plate
with limestone text (5.2:1), set throughout in Avenir Next. It is for a
landscaper or a builder whose work is mostly outdoors.

## What to change first

The six photographs (a before and an after of the same job, taken from the
same spot), the three caption rows and the paragraph under the heading.