Quote break: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/quote-break.html Core Patterns (https://patternpaste.com/patterns/) Editorial (https://patternpaste.com/patterns/editorial/) Free Standard # 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 Search patterns Loading patterns… Start here ## What you change first - The quotation. Under 90 characters, with its own quotation marks. - The source. One line, under about 22 characters, uppercase. - 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 - The quotation. Under 90 characters, with its own quotation marks. - The source. One line, under about 22 characters, uppercase. - 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Its Styled looks come with a subscription. Read the markup Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Blog Post featured lead Two Query Loops read as one section: the newest post opens at display size with its featured image, its byline and an excerpt, and the three behind it sit in a rail beside it as ruled date-and-title lines with no picture at all. It reads your own posts, so the lead changes the moment you publish; the preview on this page shows sample posts from our demo site, not yours. States no colour and no font of its own. (https://patternpaste.com/pattern/post-featured-lead.html)Call to action Callout response clock A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Each segment carries its hours, how long we take to arrive at display size and the call-out fee under a hairline, and one line under the bar gives the hourly rate after that. On a phone the bar stacks into three rows that still name their hours. States no colour and no font of its own. (https://patternpaste.com/pattern/callout-response-clock.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Editorial Access Free Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks group, paragraph, separator Presets color 5, spacing 5, font-size 1 WordPress 7.0+ Continue exploring ## Next in Editorial Explore all 13 Editorial patterns (https://patternpaste.com/patterns/editorial/) Shot in Twenty Twenty-Five Editorial No 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. Editorial Preview pattern (https://patternpaste.com/pattern/open-letter.html) Shot in Twenty Twenty-Five Editorial No 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. Editorial Preview pattern (https://patternpaste.com/pattern/story-two-voices.html) Shot in Twenty Twenty-Five Editorial No 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. Editorial Preview pattern (https://patternpaste.com/pattern/article-footer.html)