Pattern Paste
Subscribe

Core Patterns Editorial

FreeStandard

Quote break

A reading column broken by one quotation: two hairlines run wider than the measure and between them the line is set at display size, with its source on a short rule beneath, before the prose resumes at its own width.

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 you change first

  1. The quotation. Under 90 characters, with its own quotation marks.
  2. The source. One line, under about 22 characters, uppercase.
  3. The copy. Two paragraphs either side.

The signature moment

The rules run past the column

The prose is a 36rem column. The quotation is a 62rem alignwide group whose first and last blocks are wide separators, so two lines of currentColor cut across the page well outside the text they interrupt, and the quotation sits between them at up to 52px. It is the structural-mark signature: the rules are what tell a reader that this is a break in the article and not a paragraph that got loud. The source line repeats the device at small scale, a 3rem rule beside 14px uppercase.

Theme handoff

What comes from where

From your theme

  • Typeface.
  • Palette.
  • Every rule.
  • Spacing rhythm.

Set by this pattern

  • The widths
  • The quotation
  • The short rule
  • Body proportion

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 reading column broken by one quotation. Two hairlines run wider than the column, and between them the line is set at display size with its source on a short rule beneath, before the prose resumes at its own width. core/group, core/paragraph and core/separator only.

The signature moment: the rules run past the column

The prose is a 36rem column. The quotation is a 62rem alignwide group whose first and last blocks are wide separators, so two lines of currentColor cut across the page well outside the text they interrupt, and the quotation sits between them at up to 52px. It is the structural-mark signature: the rules are what tell a reader that this is a break in the article and not a paragraph that got loud. The source line repeats the device at small scale, a 3rem rule beside 14px uppercase.

This is deliberately not core/quote. The quote block takes its border, its italic and its padding from the theme, and each of the stock themes does something different with it; a break that is sometimes italic, sometimes bordered and sometimes neither is not one design. Paragraphs with explicit proportion are the same design everywhere, and the quotation marks are typed.

Make it yoursVariations and the edits to make first

What you change first

  1. The quotation. Under 90 characters, with its own quotation marks.
  2. The source. One line, under about 22 characters, uppercase.
  3. The copy. Two paragraphs either side. Keep at least one paragraph after the break, or it is a closing quote and not a break.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • Typeface. None stated. A serif theme will set the quotation in its serif, which is how pull quotes in print work; a sans theme gets a sans.
  • Palette. base ground, contrast text, two-rung chains. The quotation carries its colour explicitly, because at display size it is the heading of this section in everything but tag.
  • Every rule. Three core/separator blocks stating no colour.
  • Spacing rhythm. Core spacing presets.

What it decides for itself

  • The widths: 36rem and 62rem, in rem.
  • The quotation: clamp(1.75rem, 3.6vw, 3.25rem), weight 600, -0.03em, line-height 1.1. Not italic; the rules and the size do the work.
  • The short rule: 3rem, fixed.
  • Body proportion: clamp(1.0625rem, 1.45vw, 1.25rem) on 1.75.

Contrast

Every pair is contrast on base. The quotation is large text at 3:1; body and source are held to 4.5:1. Rules carry no text.

Display type

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(1.75rem, 3.6vw, 3.25rem)
Technical notesBlock mechanics, responsive behaviour and constraints

How the widths work

The band is constrained at contentSize: 36rem, wideSize: 62rem. The prose takes the content width, the quotation group takes the wide width, both centred, so they share a centre line and the rules overhang the column by 13rem each side. The short rule under the quotation is a separator inside a flexWrap: nowrap flex group with layout.selfStretch: fixed at 3rem; its neighbour is the source label.

What happens at 390

Column and quotation group are both the width of the phone. The quotation floors at 28px on 1.1, which for a line of this length is four to five lines: keep a replacement under about 90 characters. The source row stays a row; the 3rem rule and the label fit side by side at 14px up to about 22 characters of label; the first draft's 26-character placeholder wrapped (measured 2026-08-21). The wide rules become full-width rules, which is what a break looks like on a phone.

Questions

Quote break: common questions

Does Quote break need a plugin?

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

Will Quote break match my theme?

Choose by variation. Quote break takes your theme’s palette; Folio and Vow bring its own colours.

How many variations does Quote break have?

3: Quote break, Folio and Vow. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Quote break 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.

Which WordPress version does it need?

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.

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.

6,153 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":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"36rem","wideSize":"62rem"}} -->
<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:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.0625rem, 1.45vw, 1.25rem))","fontWeight":"400","letterSpacing":"normal"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.0625rem, 1.45vw, 1.25rem));font-weight:400;letter-spacing:normal">The brief asked for a building that would still look right in thirty years, which is a polite way of asking for one that does not look like this year. Nobody on the team had done that before, and the first three schemes were, in hindsight, simply the three things that were fashionable at the time.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.0625rem, 1.45vw, 1.25rem))","fontWeight":"400","letterSpacing":"normal"}}} -->
<p style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.0625rem, 1.45vw, 1.25rem));font-weight:400;letter-spacing:normal">The fourth came from the client, or rather from a question she asked in a meeting that was meant to be about something else.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0","margin":{"top":"var:preset|spacing|70","bottom":"0"}}},"layout":{"type":"constrained","contentSize":"62rem"}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:0"><!-- wp:separator {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:0;margin-bottom:0"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"0"}},"typography":{"fontSize":"clamp(1.75rem, 3.6vw, 3.25rem)","fontWeight":"600","letterSpacing":"-0.03em","lineHeight":"1.1"}}} -->
<p style="margin-top:var(--wp--preset--spacing--50);margin-bottom:0;font-size:clamp(1.75rem, 3.6vw, 3.25rem);font-weight:600;letter-spacing:-0.03em;line-height:1.1">“Which of these would you be embarrassed by first, and could we not build that one?”</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30","margin":{"top":"var:preset|spacing|40","bottom":"0"},"padding":{"bottom":"var:preset|spacing|50"}}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:separator {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"layout":{"selfStretch":"fixed","flexSize":"3rem"}}} -->
<hr class="wp-block-separator has-alpha-channel-opacity" style="margin-top:0;margin-bottom:0"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"max(0.875rem, 14px)","fontWeight":"600","letterSpacing":"0.18em","textTransform":"uppercase"},"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"}}} -->
<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:max(0.875rem, 14px);font-weight:600;letter-spacing:0.18em;text-transform:uppercase">Client, fourth meeting</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:separator {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:0;margin-bottom:0"/>
<!-- /wp:separator --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.0625rem, 1.45vw, 1.25rem))","fontWeight":"400","letterSpacing":"normal"}}} -->
<p style="margin-top:var(--wp--preset--spacing--70);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.0625rem, 1.45vw, 1.25rem));font-weight:400;letter-spacing:normal">It is not a design method and nobody has since tried to make it one. But it reframed the job as subtraction, and a team that is taking things away argues about different things than a team that is adding them.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.0625rem, 1.45vw, 1.25rem))","fontWeight":"400","letterSpacing":"normal"}}} -->
<p style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--large, clamp(1.0625rem, 1.45vw, 1.25rem));font-weight:400;letter-spacing:normal">The scheme that got built is the fourth one with two more things taken out of it, both at her suggestion, both in the last week.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
Variation: Folio
6,660 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"#efe9df","text":"#141517"},"spacing":{"blockGap":"0","padding":{"top":"clamp(3.5rem, 7vw, 6rem)","bottom":"clamp(3.5rem, 7vw, 6rem)","left":"clamp(1.25rem, 4vw, 2.5rem)","right":"clamp(1.25rem, 4vw, 2.5rem)"}},"elements":{"link":{"color":{"text":"#141517"}}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontWeight":"400"}},"layout":{"type":"constrained","contentSize":"36rem","wideSize":"62rem"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:#141517;background-color:#efe9df;padding-top:clamp(3.5rem, 7vw, 6rem);padding-right:clamp(1.25rem, 4vw, 2.5rem);padding-bottom:clamp(3.5rem, 7vw, 6rem);padding-left:clamp(1.25rem, 4vw, 2.5rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400"><!-- wp:paragraph {"style":{"color":{"text":"#141517"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1.0625rem, 1.3vw, 1.1875rem)","fontWeight":"400","lineHeight":"1.65"}}} -->
<p class="has-text-color" style="color:#141517;margin-top:0;margin-bottom:0;font-size:clamp(1.0625rem, 1.3vw, 1.1875rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.65">Harbour &amp; Hale had drawn the library for four years before anyone photographed it. They sent me the plans, a list of the rooms and a note that said the light was the point.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#141517"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1.0625rem, 1.3vw, 1.1875rem)","fontWeight":"400","lineHeight":"1.65"}}} -->
<p class="has-text-color" style="color:#141517;margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:clamp(1.0625rem, 1.3vw, 1.1875rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.65">I spent the first morning with the camera in its bag, walking round with the caretaker, writing down when the sun came through the north lights.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0","margin":{"top":"var:preset|spacing|70","bottom":"0"}}},"layout":{"type":"constrained","contentSize":"62rem"}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:0"><!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"#5b5f66"},"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:0;margin-bottom:0;background-color:#5b5f66;color:#5b5f66"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"style":{"color":{"text":"#141517"},"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(2.125rem, calc(1.5225rem + 2.4719vw), 3.5rem)","fontWeight":"500","letterSpacing":"-0.02em","lineHeight":"1.1"}}} -->
<p class="has-text-color" style="color:#141517;margin-top:var(--wp--preset--spacing--50);margin-bottom:0;font-size:clamp(2.125rem, calc(1.5225rem + 2.4719vw), 3.5rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.02em;line-height:1.1">“She spent a morning just looking, and the pictures are the building we thought we had drawn.”</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30","margin":{"top":"var:preset|spacing|40","bottom":"0"},"padding":{"bottom":"var:preset|spacing|50"}}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--50);margin-top:var(--wp--preset--spacing--40);margin-bottom:0"><!-- wp:separator {"style":{"color":{"background":"#c8432b"},"spacing":{"margin":{"top":"0","bottom":"0"}},"layout":{"selfStretch":"fixed","flexSize":"3rem"}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background" style="margin-top:0;margin-bottom:0;background-color:#c8432b;color:#c8432b"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"style":{"color":{"text":"#5b5f66"},"spacing":{"margin":{"top":"0","bottom":"0"}},"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:#5b5f66;margin-top:0;margin-bottom:0;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">Mira Sato, Harbour &amp; Hale</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"#5b5f66"},"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:0;margin-bottom:0;background-color:#5b5f66;color:#5b5f66"/>
<!-- /wp:separator --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"#141517"},"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1.0625rem, 1.3vw, 1.1875rem)","fontWeight":"400","lineHeight":"1.65"}}} -->
<p class="has-text-color" style="color:#141517;margin-top:var(--wp--preset--spacing--70);margin-bottom:0;font-size:clamp(1.0625rem, 1.3vw, 1.1875rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.65">The book went to press at Pressworks in March, 96 pages, most of them taken between nine and eleven in the morning.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#141517"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1.0625rem, 1.3vw, 1.1875rem)","fontWeight":"400","lineHeight":"1.65"}}} -->
<p class="has-text-color" style="color:#141517;margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:clamp(1.0625rem, 1.3vw, 1.1875rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.65">The caretaker is in the acknowledgements.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Editorial

Explore all 13 Editorial patterns

Open letter rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialNo plugin needed

Open letter

A statement set as a letter: a centred eyebrow, headline and short rule open it, the body runs left-aligned at a generous size and line height down one narrow measure, and it closes with a sign-off set in italic at display size.

EditorialPreview pattern
Story two voices rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialNo plugin needed

Story two voices

How we met, told twice: two monogram circles head two columns, Nell and Sam, then three questions set across the full width, each answered once by each of them side by side, the answers disagreeing a little.

EditorialPreview pattern
Article footer rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialNo plugin needed

Article footer

The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer.

EditorialPreview pattern