# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/hero-quote-open.html Section: Hero Access: Included in Pattern Paste access. Needs: 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. Blocks: button, buttons, group, heading, paragraph Keywords: hero, quote, quotation, opening, testimonial hero, attribution ## Variations (3) ### Open quote (the default) Identical markup in every theme. Your base as the ground and your contrast as the type. The quotation is centred on a 44rem measure with a flush opening quote mark, and the hairline under it separates the quote from the name, the role and the one action, which are the turn back into your own voice. ### Night quote Identical markup in every theme. The colour axis by inversion: your contrast becomes the ground and your base every piece of type. The hairline follows the type because it is drawn in currentColor, and the action swaps with it, so the whole band reverses with nothing else moved. Both slugs exist in every block theme, so the inversion arrives everywhere. ### Indented quote Identical markup in every theme. The composition changes and no promise does. The quotation is pushed off the left margin into an indent and set ragged-right, while the hairline, the attribution row and the action stay flush at the band's left edge, so the quote reads as something lifted out of a document rather than centred in a band. --- ## 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. ## 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/paragraph`s 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. ## 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. ## 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. ## 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. ## What you will change first 1. **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. 2. **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. 3. **The measure.** `44rem` on the group wrapping the quotation. Narrow it for more lines and more drama, widen it for a calmer opening. 4. **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.