Hero quote open: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-quote-open.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access Standard # Hero quote open A hero that opens in someone else's voice: one quoted sentence set at display size on a 44rem measure, a currentColor hairline under it, and beneath the hairline a tiny tracked attribution row and one action. Testimonials sit in the middle of a page; this puts the quotation first and makes it the first thing the page says. ## All patterns Search patterns Loading patterns… Start here ## What you will change first - The quotation. It is written short on purpose. - The name and the role. Two lines, side by side on a wide screen and stacked on a phone, because the row wraps rather than being fixed. - The measure. 44rem on the group wrapping the quotation. - The action. One button, deliberately. The signature moment ## The signature moment A structural mark: the section opens in someone else's voice, and the hairline is the turn back into yours. Everything above the rule is the quotation, at the largest size on the page. Everything below it is the site speaking: who said it, and what to do next. Testimonials sections put a quote in the middle of a page, after the argument has already been made, where it works as corroboration. This one puts it at the top and makes it the first thing said, so the reader meets the claim before they meet the claimant, and the hairline is the only device marking the change of speaker. Theme handoff ## What comes from where ### From your theme - Typeface - The ground - The hairline - The action 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 hero section whose entire content is a quotation. One sentence set at display size on a 44rem measure, a hairline beneath it, then a name, a role and one action. There is no eyebrow, no lede and no second column: the page starts by quoting somebody and then answers. ### The signature moment A structural mark: the section opens in someone else's voice, and the hairline is the turn back into yours. Everything above the rule is the quotation, at the largest size on the page. Everything below it is the site speaking: who said it, and what to do next. Testimonials sections put a quote in the middle of a page, after the argument has already been made, where it works as corroboration. This one puts it at the top and makes it the first thing said, so the reader meets the claim before they meet the claimant, and the hairline is the only device marking the change of speaker. That is also what separates it from the two other quotation patterns in this catalogue. pull-quote is a testimonial: a quote with an attribution packed under it and nothing to do. quote-break is an interruption: a quote set between two rules inside a reading column that resumes afterwards. This one is an opening. It carries an action, it is the first section on a page, and its attribution row is a structural device rather than a footnote. Make it yoursVariations and the edits to make first ### Variations - Night quote inverts the band. Your contrast becomes the ground and your base every piece of type; the hairline follows without being touched. One axis moves and nothing else does. - Indented quote changes the composition only. The quotation is inset from the left margin and set ragged-right, while the hairline, the attribution row and the action stay flush at the band's left edge and run wider than the quote, so the quotation reads as something lifted out of a document. ### What you will change first - The quotation. It is written short on purpose. At this size a long quote stops being a quotation and becomes a paragraph; one sentence with a concrete number in it is the shape. Keep the quote marks typed in. - The name and the role. Two lines, side by side on a wide screen and stacked on a phone, because the row wraps rather than being fixed. - The measure. 44rem on the group wrapping the quotation. Narrow it for more lines and more drama, widen it for a calmer opening. - The action. One button, deliberately. A hero that opens with somebody else's sentence has one thing to ask for; a second button turns the attribution row into a toolbar. If you set a colour through the editor's colour panel you replace a fallback chain with a single fixed value, and the section will paint that value in every theme instead of following the one it is in. On your own site that is often exactly what you want; it is worth knowing you are doing it. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme This pattern states no colour of its own and no font of its own: - Typeface comes entirely from your theme, so the quotation takes your display face and the tracked attribution takes it too. Test it in both a serif and a sans theme: at this size the two read very differently, and both are correct. - The ground is your base, falling back to core's white. The type is your contrast, falling back to core's black. Those are the only two colour slugs that exist in every block theme, which is why the inverted variation arrives everywhere. - The hairline is currentColor. It cannot blank, it needs no chain, and it follows the type wherever the theme puts it, which is the whole reason the inverted variation needs no colour of its own either. - The action is a core/button, so hover and focus stay your theme's to style. It carries no typography attribute: core/button moved its typography styles to the inner anchor between versions, so a button carrying one does not stay valid across editor versions. It is sized with padding instead. What the pattern decides for itself is proportion: the 44rem measure, the display ramp and its 1.15 leading, the tight negative tracking on the quotation against the wide 0.2em tracking on the attribution, and where the hairline sits between them. Technical notesBlock mechanics, responsive behaviour and constraints ### Which block sets the quotation, and why The quoted sentence is a core/heading at level 1, not a core/quote. It is the hero's headline: it is the largest thing on the page, it is the first thing said, and on a page that opens this way it is the document's h1. A core/quote would also bring the theme's own opinion about blockquotes with it, which in the stock themes is a left border, an indent or an italic, and every one of those is a second structural device fighting the hairline that the signature depends on. The quotation marks are typed into the text, flush at the start of the line, so the mark belongs to the sentence rather than to a block style that varies by theme. The name and the role are two core/paragraphs in a flex row, and the hairline is that row's own border-top, not a core/separator. Twenty Twenty-Four narrows a separator without is-style-wide to a centred 100px stub, so the signature would depend on remembering a class name. A group's own per-side border is immune to that rule and always runs the width of the row. ### A note on legibility The quotation is large text and is judged at the 3:1 bar; the attribution is not, and is held to the full 4.5:1. It is set in the same full-strength text colour as the quotation and made small by size and tracking, never by fading it out. Its floor is 13px, above the 12px hard floor this catalogue holds even incidental type to. If you restyle it, shrink the size and keep the colour. ### Requirements None beyond a block theme. No plugin, no updater, nothing to install. It does not require the preset contract either: every colour is a fallback chain ending in a slug WordPress itself guarantees, so in a theme that defines no presets at all the band falls back to white and the type to black rather than blanking. Questions ## Hero quote open: common questions Does Hero quote open need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Hero quote open match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Hero quote open have? 3: Open quote, Night quote and Indented quote. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Hero quote open free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 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. 4.1KB of core-block markup, 5 blocks (button, buttons, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) 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 Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.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 Hero Access Subscription Plugin None, core blocks only Variations 3 Colour From your theme Type From your theme Motion None Blocks button, buttons, group, heading, paragraph Presets color 5, font-size 1 WordPress 7.0+ Continue exploring ## Next in Hero Explore all 32 Hero patterns (https://patternpaste.com/patterns/hero/)Also in Testimonials (https://patternpaste.com/patterns/testimonials/) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero plate on paper A hero that is a card laid on the page rather than the page's own top edge: a full-bleed band of your theme's paper with generous air on all four sides, holding one inset plate of your contrast colour that carries the whole hero, eyebrow, headline, lede and two buttons. Hero Preview pattern (https://patternpaste.com/pattern/hero-plate-on-paper.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero reel A full-bleed video cover, 44rem tall, with every word of it packed into the bottom-left corner: a tracked eyebrow, a display headline held to a measure that stays 26rem up to a 1300px window and opens to 38rem on a wide one, one line of orientation and two buttons. Hero Preview pattern (https://patternpaste.com/pattern/hero-reel.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero right weight A picture-led hero that reverses the usual hierarchy: the photograph takes the wide right column at a 4:3 crop and the words are a narrow 38% caption beside it, set small and hung from the same bottom line. Hero Preview pattern (https://patternpaste.com/pattern/hero-right-weight.html)