[Library] Hero

Catalogue accessStandard

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.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

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

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.

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 the versions this catalogue supports, so a button carrying one is valid in 7.0 and marked invalid in the 6.6 editor. 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.

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.

Which block sets the quotation, and why184 words

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.

Variations82 words
  • 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 legibility74 words

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.

Requirements57 words

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.

Back to the library

Continue exploring

Next in Hero

Explore all 18 Hero patterns