Hero tint wash: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-tint-wash.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access Standard # Hero tint wash A full-bleed photographic opener with exactly three things on it: one two-word headline at up to 128px, a 12px tracked line sitting straight underneath it, and one button. The jump between the two type sizes is the whole composition, and a 90% veil of your contrast colour is what lets a two-word headline hold a 36rem stage whatever photograph you choose. Includes a replaceable example photograph. ## All patterns Search patterns Loading patterns… The signature moment ## Scale collision One word at display size sitting directly on a 12px tracked line, with nothing in between. The headline runs from 56px to 128px at -0.05em and a line-height of exactly 1; the line under it is 12px to 13px, uppercase, tracked at 0.42em, and its top margin is 1.15rem, so the two are touching. There is no lede, no rule, no eyebrow above, and no intermediate size anywhere in the pattern. The jump between roughly 128px and roughly 12px IS the composition; everything else is held flat so that the jump is the only thing to look at. Theme handoff ## What comes from where ### Theme and pattern Inherits: every colour (veil contrast, type and button ground base, button text contrast), the typeface, and the spacing scale on the hand-off row. Decides: the veil's opacity, the two type sizes and the distance between them, the 44rem inner measure, the 36rem minimum height (in rem, never vh), and the square button. The cover states its own text colour as a chain, so core's :where() rule that paints cover text #fff never applies. Heading level is h1: this is a page opener. 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 full-bleed core/cover with three things on it and nothing else: a two-word headline at display size, a 12px tracked line, and one button. Centred in a 44rem inner container on a 36rem stage, under a 90% veil of your contrast colour. ### The signature moment: scale collision One word at display size sitting directly on a 12px tracked line, with nothing in between. The headline runs from 56px to 128px at -0.05em and a line-height of exactly 1; the line under it is 12px to 13px, uppercase, tracked at 0.42em, and its top margin is 1.15rem, so the two are touching. There is no lede, no rule, no eyebrow above, and no intermediate size anywhere in the pattern. The jump between roughly 128px and roughly 12px IS the composition; everything else is held flat so that the jump is the only thing to look at. hero-statement owns the centred manifesto on paper: a sentence, extreme air, and a rule. This is the same nerve struck on a photograph instead, and the photograph is why the numbers can be this extreme. A two-word headline on paper leaves an empty band; a two-word headline over a 90% veil has a texture holding the rest of the stage, so a 36rem section reads as full with eleven words in it. Make it yoursVariations and the edits to make first ### Variations - In motion: backgroundType: "video" and nothing else changed. A clip instead of a still, same veil, same type; core writes autoplay muted loop playsinline. - Stated wash ("colour": "stated"): the colour axis, stated. The veil is a literal deep ink-blue #0d1a30 and the type a literal warm bone #f0e9dc, including the button and the hand-off row's paper. It looks identical in every theme and matches none, which is the point: no preset pair can promise ink-blue against bone, because base and contrast are the only universal slugs and they are a light and a dark, not a hue relationship. Measured as painted: at 90% over a white photograph the ground is rgb(37, 49, 69) and the bone type is 10.86:1 on it; over a black photograph, rgb(12, 23, 43) at 14.79:1. Ink on bone in the hand-off row is 14.4:1. It still states no font family, uses core blocks only, and carries no bare preset attribute; stating its own colours changes what is measured, not whether it is. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits: every colour (veil contrast, type and button ground base, button text contrast), the typeface, and the spacing scale on the hand-off row. Decides: the veil's opacity, the two type sizes and the distance between them, the 44rem inner measure, the 36rem minimum height (in rem, never vh), and the square button. The cover states its own text colour as a chain, so core's :where() rule that paints cover text #fff never applies. Heading level is h1: this is a page opener. ### Display type Off the theme's ladder on purpose, because the size is the composition: - h1 at clamp(3.5rem, 9vw, 8rem) Technical notesBlock mechanics, responsive behaviour and constraints ### Why the veil is 90 and not lower A photograph's luminance is unknowable, so type never sits on one. A cover's veil is the exception that can be measured: its colour is a chain and its opacity is a number, so it is measured composited over a white photograph and over a black one, at the worse of the two. At dimRatio 90 with a contrast veil and base type, the lightest ground the type can ever land on is the veil over a white image, which is close to the veil itself. At 40 the same shape measured 2.48:1 on cover-veil and was rejected. The 90 is also doing the composition's work, not only keeping the type readable. At 80 the image reads as a picture the headline is standing on; at 90 it is grain, and a two-word headline is the subject. ### What a buyer changes first The photograph. The cover includes an example image; choose Replace to select one from your media library with the composition already set. Then the headline: keep it to two or three words. At 128px a fourth word wraps and the scale collision becomes an ordinary big heading over a caption. The tracked line should stay under about 26 characters so it holds one line at 390. ### The hand-off row A full-bleed cover fills the stage edge to edge and is never alone on a real page, so the pattern ships what comes next: a tracked label and one paragraph at a 34rem measure, on your theme's paper. It shows where the hero ENDS, and it is the first thing a buyer rewrites or deletes. ### Included images The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. Questions ## Hero tint wash: common questions Does Hero tint wash need a plugin? No. It is built only from core WordPress blocks (button, buttons, cover, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Hero tint wash match my theme? Choose by variation. Ink wash and In motion take your theme’s palette; Stated wash brings its own colours. How many variations does Hero tint wash have? 3: Ink wash, In motion and Stated wash. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Hero tint wash free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 6.0KB of core-block markup, 6 blocks (button, buttons, cover, 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/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Hero Access Subscription Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme Motion None Blocks button, buttons, cover, group, heading, paragraph Presets color 5, spacing 3, font-size 1 WordPress 7.0+ Continue exploring ## Next in Hero Explore all 32 Hero patterns (https://patternpaste.com/patterns/hero/)Also in Cover (https://patternpaste.com/patterns/cover/) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero statement An opening section with nothing in it but the sentence: one statement set at extreme display size on a narrow measure, a short rule under it, a single tracked meta line, and two actions. Hero Preview pattern (https://patternpaste.com/pattern/hero-statement.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero, two covers An opening built from two identical photograph frames side by side with a hairline gutter between them. Hero Preview pattern (https://patternpaste.com/pattern/hero-two-covers.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Waitlist hero A launch hero built around one oversized action: a short headline, a single line of copy, then a full-width button slab with a tiny reassurance line under it, and three small proof numerals on a ruled foot beneath that. Hero Preview pattern (https://patternpaste.com/pattern/hero-waitlist.html)