Pattern Paste
Subscribe

Core Patterns How it works

FreeStandard

Steps cards

Four photographic process cards with level tops and descending feet.

Each plate carries a replaceable WordPress image, a tracked step label, a short title and one sentence. The grid stretches the cards while their bottom margins draw the stair, reflowing into pairs and then a single column as the page narrows.

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

Start here

What to change first

  1. Replace the four photos with examples of your own process and update their alternative text. The supplied interior details illustrate discovery, a natural palette, finishing touches and a completed workspace.
  2. Edit the step labels, titles and short descriptions. Keep the sequence in document order so it remains clear on a phone and to screen readers.
  3. Duplicate or delete cards and adjust the descending bottom margins evenly. The final card is the baseline; setting all drops to zero makes a level row.
  4. Choose the ruled variation when the surrounding page already has enough boxes.

The signature moment

The feet descend

Each card is a stretched grid child. Descending bottom margins lift the first three feet above the last, so the row's bottom edge draws a stair independently of the length of each description. The tops and 4:3 image crops stay aligned. The grid reflows into pairs and then one card per row as the available width narrows. Fluid drops become shallower on smaller screens.

Theme handoff

What comes from where

From your theme

Typeface, heading sizes, base and contrast colours, and vertical spacing presets. Every border is currentColor. Headings follow the theme's ladder with clamp fallbacks. Narrow card descriptions keep a reading-size clamp.

Set by this pattern

A full-width band holds a 1240px measure. The grid has 16rem minimum tracks and fluid gutters. Cards carry fluid horizontal padding, preset vertical padding, and a matching 4:3 photograph above the tracked step label, title and sentence. The photos crop with cover; text remains on the page ground.

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

A photographic process in four plated steps, shown with an interior studio's journey from first ideas to handover. The image tops stay level while the card feet descend. Both the plated and open ruled versions include the same photos.

The signature moment: the feet descend

Each card is a stretched grid child. Descending bottom margins lift the first three feet above the last, so the row's bottom edge draws a stair independently of the length of each description. The tops and 4:3 image crops stay aligned. The grid reflows into pairs and then one card per row as the available width narrows. Fluid drops become shallower on smaller screens.

Make it yoursVariations and the edits to make first

The variation

Ruled stair removes the enclosing sides and bottom border, retaining a heavy top rule and the same photos and bottom-margin descent. Its feet are open space rather than the visible lower edges of boxes.

What to change first

  1. Replace the four photos with examples of your own process and update their alternative text. The supplied interior details illustrate discovery, a natural palette, finishing touches and a completed workspace.
  2. Edit the step labels, titles and short descriptions. Keep the sequence in document order so it remains clear on a phone and to screen readers.
  3. Duplicate or delete cards and adjust the descending bottom margins evenly. The final card is the baseline; setting all drops to zero makes a level row.
  4. Choose the ruled variation when the surrounding page already has enough boxes.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

Typeface, heading sizes, base and contrast colours, and vertical spacing presets. Every border is currentColor. Headings follow the theme's ladder with clamp fallbacks. Narrow card descriptions keep a reading-size clamp.

What it decides for itself

A full-width band holds a 1240px measure. The grid has 16rem minimum tracks and fluid gutters. Cards carry fluid horizontal padding, preset vertical padding, and a matching 4:3 photograph above the tracked step label, title and sentence. The photos crop with cover; text remains on the page ground.

Contrast and display type

Headings use the theme's size ladder. Card body copy deliberately uses clamp(0.9375rem, 1.05vw, 1rem) to remain readable in a 16rem track. Step labels are incidental tracked markings. Body copy and labels must reach 4.5:1; large headings must reach 3:1. Text colour resolves against the theme ground, never against the photograph.

Technical notesBlock mechanics, responsive behaviour and constraints

Included images and core blocks

The reviewed WordPress photographs from assets/wordpress-images.json are included in the copied markup as public HTTPS URLs, without foreign attachment IDs. Previews use the same sources. Replace them with the Image block controls. Only core group, image, heading and paragraph blocks are needed. No plugin, custom CSS or JavaScript.

Questions

Steps cards: common questions

Does Steps cards need a plugin?

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

Will Steps cards match my theme?

Choose by variation. Plated stair and Ruled stair take your theme’s palette; Cloud and teal, Mend and Spur bring its own colours.

How many variations does Steps cards have?

5: Plated stair, Cloud and teal, Mend, Spur and Ruled stair. 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 Steps cards free?

Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription.

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,961 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"blockGap":"0","padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","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--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","fontWeight":"600","letterSpacing":"0.24em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.875rem, 1vw, 0.9375rem);font-weight:600;letter-spacing:0.24em;line-height:1.2;text-transform:uppercase">How we work</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--x-large, clamp(1.875rem, 3.4vw, 3rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--x-large, clamp(1.875rem, 3.4vw, 3rem))">From first ideas to a finished room.</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}},"layout":{"type":"constrained","contentSize":"40rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.2vw, 1.1875rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.2vw, 1.1875rem))">We shape the room with you, from the way you use it to the details you touch every day.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|70"},"blockGap":{"top":"var:preset|spacing|40","left":"1.5rem"}}},"layout":{"type":"grid","minimumColumnWidth":"16rem"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--70)"><!-- wp:group {"style":{"border":{"color":"currentColor","style":"solid","width":"1px"},"spacing":{"blockGap":"var:preset|spacing|30","margin":{"bottom":"clamp(0rem, 3.6vw, 4.5rem)"},"padding":{"top":"var:preset|spacing|40","right":"clamp(1rem, 1.6vw, 1.5rem)","bottom":"var:preset|spacing|40","left":"clamp(1rem, 1.6vw, 1.5rem)"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color" style="border-color:currentColor;border-style:solid;border-width:1px;margin-bottom:clamp(0rem, 3.6vw, 4.5rem);padding-top:var(--wp--preset--spacing--40);padding-right:clamp(1rem, 1.6vw, 1.5rem);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1rem, 1.6vw, 1.5rem)"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}}}} -->
<figure class="wp-block-image size-large" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--30)"><img src="https://pd.w.org/2026/06/4006a26563aad0884.09383328-1536x1152.jpg" alt="Two round white tables and green and white chairs beside tall windows, seen from above." style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Step 01</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Discover</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1.05vw, 1rem)"}}} -->
<p style="margin-bottom:0;font-size:clamp(0.9375rem, 1.05vw, 1rem)">We visit the space and listen to what a better day there would look like.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"color":"currentColor","style":"solid","width":"1px"},"spacing":{"blockGap":"var:preset|spacing|30","margin":{"bottom":"clamp(0rem, 2.4vw, 3rem)"},"padding":{"top":"var:preset|spacing|40","right":"clamp(1rem, 1.6vw, 1.5rem)","bottom":"var:preset|spacing|40","left":"clamp(1rem, 1.6vw, 1.5rem)"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color" style="border-color:currentColor;border-style:solid;border-width:1px;margin-bottom:clamp(0rem, 2.4vw, 3rem);padding-top:var(--wp--preset--spacing--40);padding-right:clamp(1rem, 1.6vw, 1.5rem);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1rem, 1.6vw, 1.5rem)"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}}}} -->
<figure class="wp-block-image size-large" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--30)"><img src="https://pd.w.org/2026/05/4016a0c06d0363686.50882683-1152x1536.jpeg" alt="Dried flowers in a slender white vase against a dark green wall." style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Step 02</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Palette</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1.05vw, 1rem)"}}} -->
<p style="margin-bottom:0;font-size:clamp(0.9375rem, 1.05vw, 1rem)">We gather colours and natural textures that make the room feel like yours.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"color":"currentColor","style":"solid","width":"1px"},"spacing":{"blockGap":"var:preset|spacing|30","margin":{"bottom":"clamp(0rem, 1.2vw, 1.5rem)"},"padding":{"top":"var:preset|spacing|40","right":"clamp(1rem, 1.6vw, 1.5rem)","bottom":"var:preset|spacing|40","left":"clamp(1rem, 1.6vw, 1.5rem)"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color" style="border-color:currentColor;border-style:solid;border-width:1px;margin-bottom:clamp(0rem, 1.2vw, 1.5rem);padding-top:var(--wp--preset--spacing--40);padding-right:clamp(1rem, 1.6vw, 1.5rem);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1rem, 1.6vw, 1.5rem)"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}}}} -->
<figure class="wp-block-image size-large" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--30)"><img src="https://pd.w.org/2026/06/6436a312bc13a3cb6.80602742-1152x1536.jpg" alt="Green and cream leaves of a potted plant." style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Step 03</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Details</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1.05vw, 1rem)"}}} -->
<p style="margin-bottom:0;font-size:clamp(0.9375rem, 1.05vw, 1rem)">We bring the room to life with plants, lighting and the finishing touches.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"color":"currentColor","style":"solid","width":"1px"},"spacing":{"blockGap":"var:preset|spacing|30","padding":{"top":"var:preset|spacing|40","right":"clamp(1rem, 1.6vw, 1.5rem)","bottom":"var:preset|spacing|40","left":"clamp(1rem, 1.6vw, 1.5rem)"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color" style="border-color:currentColor;border-style:solid;border-width:1px;padding-top:var(--wp--preset--spacing--40);padding-right:clamp(1rem, 1.6vw, 1.5rem);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1rem, 1.6vw, 1.5rem)"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}}}} -->
<figure class="wp-block-image size-large" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--30)"><img src="https://pd.w.org/2026/06/8806a27c647abab58.91039014-1152x1536.jpg" alt="A bright workspace behind patterned glass, with yellow chairs and plants." style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Step 04</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Handover</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1.05vw, 1rem)"}}} -->
<p style="margin-bottom:0;font-size:clamp(0.9375rem, 1.05vw, 1rem)">We walk the finished room with you and make sure every detail is ready.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained","contentSize":"40rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">One studio follows your project through every stage, with clear decisions and a date for what comes next.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Ruled stair
13,345 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"blockGap":"0","padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","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--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","fontWeight":"600","letterSpacing":"0.24em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.875rem, 1vw, 0.9375rem);font-weight:600;letter-spacing:0.24em;line-height:1.2;text-transform:uppercase">How we work</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--x-large, clamp(1.875rem, 3.4vw, 3rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--x-large, clamp(1.875rem, 3.4vw, 3rem))">From first ideas to a finished room.</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}},"layout":{"type":"constrained","contentSize":"40rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.2vw, 1.1875rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.2vw, 1.1875rem))">We shape the room with you, from the way you use it to the details you touch every day.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|70"},"blockGap":{"top":"var:preset|spacing|40","left":"1.5rem"}}},"layout":{"type":"grid","minimumColumnWidth":"16rem"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--70)"><!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"3px"}},"spacing":{"blockGap":"var:preset|spacing|30","margin":{"bottom":"clamp(0rem, 3.6vw, 4.5rem)"},"padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:3px;margin-bottom:clamp(0rem, 3.6vw, 4.5rem);padding-top:var(--wp--preset--spacing--30)"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}}}} -->
<figure class="wp-block-image size-large" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--30)"><img src="https://pd.w.org/2026/06/4006a26563aad0884.09383328-1536x1152.jpg" alt="Two round white tables and green and white chairs beside tall windows, seen from above." style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Step 01</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Discover</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1rem))"}}} -->
<p style="margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1rem))">We visit the space and listen to what a better day there would look like.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"3px"}},"spacing":{"blockGap":"var:preset|spacing|30","margin":{"bottom":"clamp(0rem, 2.4vw, 3rem)"},"padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:3px;margin-bottom:clamp(0rem, 2.4vw, 3rem);padding-top:var(--wp--preset--spacing--30)"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}}}} -->
<figure class="wp-block-image size-large" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--30)"><img src="https://pd.w.org/2026/05/4016a0c06d0363686.50882683-1152x1536.jpeg" alt="Dried flowers in a slender white vase against a dark green wall." style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Step 02</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Palette</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1rem))"}}} -->
<p style="margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1rem))">We gather colours and natural textures that make the room feel like yours.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"3px"}},"spacing":{"blockGap":"var:preset|spacing|30","margin":{"bottom":"clamp(0rem, 1.2vw, 1.5rem)"},"padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:3px;margin-bottom:clamp(0rem, 1.2vw, 1.5rem);padding-top:var(--wp--preset--spacing--30)"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}}}} -->
<figure class="wp-block-image size-large" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--30)"><img src="https://pd.w.org/2026/06/6436a312bc13a3cb6.80602742-1152x1536.jpg" alt="Green and cream leaves of a potted plant." style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Step 03</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Details</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1rem))"}}} -->
<p style="margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1rem))">We bring the room to life with plants, lighting and the finishing touches.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"3px"}},"spacing":{"blockGap":"var:preset|spacing|30","padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:3px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}}}} -->
<figure class="wp-block-image size-large" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--30)"><img src="https://pd.w.org/2026/06/8806a27c647abab58.91039014-1152x1536.jpg" alt="A bright workspace behind patterned glass, with yellow chairs and plants." style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(0.75rem, 0.85vw, 0.8125rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(0.75rem, 0.85vw, 0.8125rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Step 04</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))"}}} -->
<h3 class="wp-block-heading" style="margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.25rem, 1.7vw, 1.625rem))">Handover</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1rem))"}}} -->
<p style="margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1rem))">We walk the finished room with you and make sure every detail is ready.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained","contentSize":"40rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">One studio follows your project through every stage, with clear decisions and a date for what comes next.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in How it works

Explore all 9 How it works patterns

First visit to scale rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksNo plugin needed

First visit to scale

What happens at a first appointment, drawn to scale: a bar of the whole appointment split into three solid segments whose widths are each step's share of the minutes, a scale line under it, then the three steps at the same widths, stacking on a tablet and a phone, with a title and a line each, and a closing note with one button.

How it worksPreview pattern
Steps cover stair rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksNo plugin needed

Steps cover stair

A full-bleed cover with a heavy veil of your theme's contrast colour over the photograph, a display headline at the top left and three numbered steps set as a stair: each step a huge numeral, a short title and one line under a hairline rule, every column starting lower than the one before, so the steps descend down and to the right across the photograph.

How it worksPreview pattern
Process delivery manifest rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksNo plugin needed

Process delivery manifest

A three-phase handoff unfolds through nested document frames: the brief contains the proof, and the proof contains the final delivery.

How it worksPreview pattern