Pattern Paste
Subscribe

Core Patterns Editorial

FreeStandard

Case study spread

One project told in full on a dark slab: a label and a display headline, a large photograph with a smaller one lapping its lower corner and hanging below it, then three columns for the brief, what was done and what it became, the last closing on three big figures, and a client's line under a hairline.

All patterns

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

The signature moment

A small photograph laps the corner of the large one and hangs below it, and the story ends on three figures

A flex row of two items, the second lapping the first. The large 3:2 photograph and its caption take 75 percent; the smaller 4:5 photograph is fixed at 34 percent, pulled left over the large one by a negative margin and dropped by a top margin, so it overlaps the lower corner and hangs below it. Below, three columns for the brief, what was done and what it became; the last closes on 42, 3 and 64 set large with small words beneath. A client's line sits under a hairline at the foot.

Theme handoff

What comes from where

From your theme

  • The typeface.
  • Your colours.
  • Your spacing.

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

Overview

One project told in full, the way a printed portfolio gives a job a spread: a headline, two photographs, then the brief, the work and the result side by side. It sits in editorial beside editorial-lap (a slab lapping one photograph) and case-study-summary: here a second, smaller photograph laps the first, and the result column ends on figures.

The signature moment: a small photograph laps the corner of the large one and hangs below it, and the story ends on three figures

A flex row of two items, the second lapping the first. The large 3:2 photograph and its caption take 75 percent; the smaller 4:5 photograph is fixed at 34 percent, pulled left over the large one by a negative margin and dropped by a top margin, so it overlaps the lower corner and hangs below it. Below, three columns for the brief, what was done and what it became; the last closes on 42, 3 and 64 set large with small words beneath. A client's line sits under a hairline at the foot.

On a phone the two photographs keep their lap at a smaller size and the three columns stack in reading order.

Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • The typeface. No font family is stated; the headline takes the theme's xx-large rung with a display clamp behind it, labels and captions are small tracked capitals in your body face.
  • Your colours. The slab is your contrast colour; every heading, paragraph, caption and figure states your base colour. Marks and the hairline are currentColor.
  • Your spacing. Vertical rhythm is spacing presets; the lap is in percentages so it holds at every width.
Technical notesBlock mechanics, responsive behaviour and constraints

The Folio look

The free Folio set's case study: darkroom #141517 slab, bone #efe9df headline, figures and client line, silver #b9bcc2 copy and frame captions in monospace, safelight #c8432b marks on the labels.

Photographs

Two CC0 photographs from the WordPress.org Photo Directory, linked from pd.w.org: a hotel room with a daybed and a cove in low sun. Replace them with your own project's pictures.

Questions

Case study spread: common questions

Does Case study spread need a plugin?

No. It is built only from core WordPress blocks (column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install.

Will Case study spread match my theme?

Choose by variation. Dark spread takes your theme’s palette; Folio brings its own colours.

How many variations does Case study spread have?

2: Dark spread and Folio. Each is its own markup; choose one in the toolbar above the preview before you copy.

Can I use my own images?

Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library.

Is Case study spread free?

Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

13,364 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--70);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--70);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained","contentSize":"46rem","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"3px"}},"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"left":"0.75rem"}},"typography":{"fontSize":"0.875rem","fontWeight":"600","letterSpacing":"0.14em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="border-left-color:currentColor;border-left-style:solid;border-left-width:3px;color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-left:0.75rem;font-size:0.875rem;font-weight:600;letter-spacing:0.14em;line-height:1.4;text-transform:uppercase">Case study / Kestrel Hotels, Porthleven / 2024</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.125rem, 5vw, 4.5rem))"}}} -->
<h2 class="wp-block-heading" style="font-size:var(--wp--preset--font-size--xx-large, clamp(2.125rem, 5vw, 4.5rem))">Forty-two rooms in three days, then a book.</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"},"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"75%"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:image {"aspectRatio":"3/2","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2025/08/24689419ca27ae60.96086215-1536x1152.jpg" alt="A calm hotel room with a low white bed and an orange runner, a timber daybed with orange cushions and long linen curtains." style="aspect-ratio:3/2;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:image {"aspectRatio":"4/5","scale":"cover","sizeSlug":"large","linkDestination":"none","style":{"layout":{"selfStretch":"fixed","flexSize":"34%"},"spacing":{"margin":{"top":"clamp(3rem, 12vw, 12rem)","left":"-9%"}}}} -->
<figure class="wp-block-image size-large" style="margin-top:clamp(3rem, 12vw, 12rem);margin-left:-9%"><img src="https://pd.w.org/2026/09/7656a969fdf3bd3c1.71490162-1536x1152.jpg" alt="Warm sunlight crossing a sheltered rocky cove beneath dark clouds." style="aspect-ratio:4/5;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0.75rem","bottom":"0"}},"typography":{"fontSize":"0.875rem","letterSpacing":"0.1em","lineHeight":"1.45","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0.75rem;margin-bottom:0;font-size:0.875rem;letter-spacing:0.1em;line-height:1.45;text-transform:uppercase">FR 31 / Room 12, first light / FR 36 / The cove at six</p>
<!-- /wp:paragraph -->

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"},"blockGap":{"top":"var:preset|spacing|50","left":"2rem"}}}} -->
<div class="wp-block-columns" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"3px"}},"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"left":"0.75rem"}},"typography":{"fontSize":"0.8125rem","fontWeight":"600","letterSpacing":"0.14em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="border-left-color:currentColor;border-left-style:solid;border-left-width:3px;color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-left:0.75rem;font-size:0.8125rem;font-weight:600;letter-spacing:0.14em;line-height:1.4;text-transform:uppercase">01 / The brief</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.0625rem))","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.0625rem));line-height:1.6">A new hotel in an old net loft, opening in May. They needed every room photographed before the first guest, and a book for the rooms that would still look right in five years.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"3px"}},"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"left":"0.75rem"}},"typography":{"fontSize":"0.8125rem","fontWeight":"600","letterSpacing":"0.14em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="border-left-color:currentColor;border-left-style:solid;border-left-width:3px;color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-left:0.75rem;font-size:0.8125rem;font-weight:600;letter-spacing:0.14em;line-height:1.4;text-transform:uppercase">02 / What I did</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.0625rem))","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.0625rem));line-height:1.6">A recce in March to learn the light, then three days in April with a stylist, one room every ninety minutes. I designed the book in Bristol and saw it on press at Pressworks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"3px"}},"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"left":"0.75rem"}},"typography":{"fontSize":"0.8125rem","fontWeight":"600","letterSpacing":"0.14em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="border-left-color:currentColor;border-left-style:solid;border-left-width:3px;color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-left:0.75rem;font-size:0.8125rem;font-weight:600;letter-spacing:0.14em;line-height:1.4;text-transform:uppercase">03 / What it became</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.0625rem))","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.0625rem));line-height:1.6">The website, the booking pages and a clothbound book in every room. Two more hotels booked me from it.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"},"blockGap":{"top":"1rem","left":"1.75rem"}}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"top"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)"><!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"clamp(2.25rem, 3.4vw, 3rem)","lineHeight":"1"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:clamp(2.25rem, 3.4vw, 3rem);line-height:1">42</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"0.8125rem","letterSpacing":"0.1em","lineHeight":"1.45","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:0.8125rem;letter-spacing:0.1em;line-height:1.45;text-transform:uppercase">Rooms</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"clamp(2.25rem, 3.4vw, 3rem)","lineHeight":"1"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:clamp(2.25rem, 3.4vw, 3rem);line-height:1">3</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"0.8125rem","letterSpacing":"0.1em","lineHeight":"1.45","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:0.8125rem;letter-spacing:0.1em;line-height:1.45;text-transform:uppercase">Days</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"clamp(2.25rem, 3.4vw, 3rem)","lineHeight":"1"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:clamp(2.25rem, 3.4vw, 3rem);line-height:1">64</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"0.8125rem","letterSpacing":"0.1em","lineHeight":"1.45","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:0.8125rem;letter-spacing:0.1em;line-height:1.45;text-transform:uppercase">Pages</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"var:preset|spacing|60"},"padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"constrained","contentSize":"46rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);margin-top:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"0.9375rem","letterSpacing":"0.1em","lineHeight":"1.6","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:0.9375rem;letter-spacing:0.1em;line-height:1.6;text-transform:uppercase">“The book sold out at the front desk by August, and we had printed it to give away.” Mara Quinn, brand lead, Kestrel Hotels</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Folio
13,955 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"#141517","text":"#efe9df"},"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontWeight":"400"}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:#efe9df;background-color:#141517;padding-top:var(--wp--preset--spacing--70);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--70);padding-left:clamp(1.25rem, 4vw, 4rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained","contentSize":"46rem","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"border":{"left":{"color":"#c8432b","style":"solid","width":"3px"}},"color":{"text":"#b9bcc2"},"spacing":{"padding":{"left":"0.75rem"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.875rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="border-left-color:#c8432b;border-left-style:solid;border-left-width:3px;color:#b9bcc2;padding-left:0.75rem;font-size:0.875rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.4;text-transform:uppercase">Case study / Kestrel Hotels, Porthleven / 2024</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"color":{"text":"#efe9df"},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(2.125rem, 5vw, 4.5rem)","fontWeight":"500","letterSpacing":"-0.02em","lineHeight":"1.02"}}} -->
<h2 class="wp-block-heading has-text-color" style="color:#efe9df;font-size:clamp(2.125rem, 5vw, 4.5rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.02em;line-height:1.02">Forty-two rooms in three days, then a book.</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"},"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"75%"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:image {"aspectRatio":"3/2","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2025/08/24689419ca27ae60.96086215-1536x1152.jpg" alt="A calm hotel room with a low white bed and an orange runner, a timber daybed with orange cushions and long linen curtains." style="aspect-ratio:3/2;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:image {"aspectRatio":"4/5","scale":"cover","sizeSlug":"large","linkDestination":"none","style":{"layout":{"selfStretch":"fixed","flexSize":"34%"},"spacing":{"margin":{"top":"clamp(3rem, 12vw, 12rem)","left":"-9%"}}}} -->
<figure class="wp-block-image size-large" style="margin-top:clamp(3rem, 12vw, 12rem);margin-left:-9%"><img src="https://pd.w.org/2026/09/7656a969fdf3bd3c1.71490162-1536x1152.jpg" alt="Warm sunlight crossing a sheltered rocky cove beneath dark clouds." style="aspect-ratio:4/5;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0.75rem","bottom":"0"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.875rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.45","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:#b9bcc2;margin-top:0.75rem;margin-bottom:0;font-size:0.875rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.45;text-transform:uppercase">FR 31 / Room 12, first light / FR 36 / The cove at six</p>
<!-- /wp:paragraph -->

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"},"blockGap":{"top":"var:preset|spacing|50","left":"2rem"}}}} -->
<div class="wp-block-columns" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"border":{"left":{"color":"#c8432b","style":"solid","width":"3px"}},"color":{"text":"#b9bcc2"},"spacing":{"padding":{"left":"0.75rem"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="border-left-color:#c8432b;border-left-style:solid;border-left-width:3px;color:#b9bcc2;padding-left:0.75rem;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.4;text-transform:uppercase">01 / The brief</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1rem, 1.1vw, 1.0625rem)","fontWeight":"400","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:#b9bcc2;font-size:clamp(1rem, 1.1vw, 1.0625rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.6">A new hotel in an old net loft, opening in May. They needed every room photographed before the first guest, and a book for the rooms that would still look right in five years.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"border":{"left":{"color":"#c8432b","style":"solid","width":"3px"}},"color":{"text":"#b9bcc2"},"spacing":{"padding":{"left":"0.75rem"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="border-left-color:#c8432b;border-left-style:solid;border-left-width:3px;color:#b9bcc2;padding-left:0.75rem;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.4;text-transform:uppercase">02 / What I did</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1rem, 1.1vw, 1.0625rem)","fontWeight":"400","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:#b9bcc2;font-size:clamp(1rem, 1.1vw, 1.0625rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.6">A recce in March to learn the light, then three days in April with a stylist, one room every ninety minutes. I designed the book in Bristol and saw it on press at Pressworks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"border":{"left":{"color":"#c8432b","style":"solid","width":"3px"}},"color":{"text":"#b9bcc2"},"spacing":{"padding":{"left":"0.75rem"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="border-left-color:#c8432b;border-left-style:solid;border-left-width:3px;color:#b9bcc2;padding-left:0.75rem;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.4;text-transform:uppercase">03 / What it became</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1rem, 1.1vw, 1.0625rem)","fontWeight":"400","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:#b9bcc2;font-size:clamp(1rem, 1.1vw, 1.0625rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.6">The website, the booking pages and a clothbound book in every room. Two more hotels booked me from it.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"},"blockGap":{"top":"1rem","left":"1.75rem"}}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"top"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)"><!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"#efe9df"},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(2.25rem, 3.4vw, 3rem)","fontWeight":"500","letterSpacing":"-0.03em","lineHeight":"1"}}} -->
<p class="has-text-color" style="color:#efe9df;font-size:clamp(2.25rem, 3.4vw, 3rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.03em;line-height:1">42</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.45","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:#b9bcc2;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.45;text-transform:uppercase">Rooms</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"#efe9df"},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(2.25rem, 3.4vw, 3rem)","fontWeight":"500","letterSpacing":"-0.03em","lineHeight":"1"}}} -->
<p class="has-text-color" style="color:#efe9df;font-size:clamp(2.25rem, 3.4vw, 3rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.03em;line-height:1">3</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.45","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:#b9bcc2;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.45;text-transform:uppercase">Days</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"#efe9df"},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(2.25rem, 3.4vw, 3rem)","fontWeight":"500","letterSpacing":"-0.03em","lineHeight":"1"}}} -->
<p class="has-text-color" style="color:#efe9df;font-size:clamp(2.25rem, 3.4vw, 3rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.03em;line-height:1">64</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.45","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:#b9bcc2;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.45;text-transform:uppercase">Pages</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"style":{"border":{"top":{"color":"#b9bcc2","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"var:preset|spacing|60"},"padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"constrained","contentSize":"46rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="border-top-color:#b9bcc2;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);margin-top:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"style":{"color":{"text":"#efe9df"},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.9375rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.6","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:#efe9df;font-size:0.9375rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.6;text-transform:uppercase">“The book sold out at the front desk by August, and we had printed it to give away.” Mara Quinn, brand lead, Kestrel Hotels</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Editorial

Explore all 13 Editorial patterns Also in Gallery

Article opener rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialNo plugin needed

Article opener

The opening of a long read: a ruled strip of tiny metadata, a headline set as large as the section allows beneath it, a standfirst, and a first paragraph that opens with a drop cap at a strict reading measure.

EditorialPreview pattern
Chapter rail rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialNo plugin needed

Chapter rail

A chapter of a guide: a narrow rail on the left carries the chapter numeral at display size and a short contents list, and stays put while the prose on the right scrolls past it.

EditorialPreview pattern
Comments region rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialNo plugin needed

Comments region

The comment thread as a ruled record: a long rule under the count, then every comment opened by a currentColor hairline with the name tracked small against a plain date, the comment set at reading size, and the reply link tracked back down to the name's size.

EditorialPreview pattern