Split hero: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/split-hero.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Free Standard # Split hero An asymmetric hero with a headline, supporting copy and actions in one top-aligned column, beside a compact four-row facts panel. An overrunning rule ties the two sides together. ## All patterns Search patterns Loading patterns… Start here ## What to change first - Replace the headline and short supporting paragraph. - Replace the four facts and their labels. - Update both action labels and their links. The signature moment ## Scale collision A large headline meets four short, numbered facts. A structural rule extends to 80% of the band, crossing the gap between the 62% introduction and the 34% facts column. Theme handoff ## What comes from where ### From your theme Every typeface, heading leading, the xx-large heading rung, medium body rung, spacing rhythm and button shape. Base and contrast colour chains end in the core white and black presets. Eyebrows use the optional label role; the outlined action uses the link role. ### Set by this pattern A full-width band with a 1240px inner measure, a 62/34 split, an 80% rule and top alignment. Fluid horizontal panel padding preserves room for the facts on narrow screens. The facts panel has an opaque base ground and a currentColor border. 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 An asymmetric opening section with a complete introduction beside a compact facts panel. ### The signature moment: scale collision A large headline meets four short, numbered facts. A structural rule extends to 80% of the band, crossing the gap between the 62% introduction and the 34% facts column. The introduction starts level with the facts panel. Its paragraph and actions stay directly under its heading, so a taller facts panel cannot leave an empty pocket above the headline. The facts use explicit row gaps rather than accumulating paragraph and separator margins. Make it yoursVariations and the edits to make first ### What to change first - Replace the headline and short supporting paragraph. - Replace the four facts and their labels. - Update both action labels and their links. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme Every typeface, heading leading, the xx-large heading rung, medium body rung, spacing rhythm and button shape. Base and contrast colour chains end in the core white and black presets. Eyebrows use the optional label role; the outlined action uses the link role. ### What it decides for itself A full-width band with a 1240px inner measure, a 62/34 split, an 80% rule and top alignment. Fluid horizontal panel padding preserves room for the facts on narrow screens. The facts panel has an opaque base ground and a currentColor border. ### Display type The h1 follows the xx-large theme ladder with a 2.75–4.5rem fallback. Body copy follows medium with a 1.6 line-height. Compact fact copy is 15–16px; numbered uppercase labels are 15–16px with tracking. ### Contrast Body text targets 4.5:1 and the large heading 3:1. Text sits on base with contrast ink; rules use contrast or currentColor. The verification sheet measures the three authoring themes. Technical notesBlock mechanics, responsive behaviour and constraints ### Responsive behaviour Core columns stack below 782px. The headline, paragraph and actions form one uninterrupted column before the facts. There are no fixed section heights or bottom-alignment offsets. ### Blocks and editing Core blocks only. No companion plugin, script, custom CSS or fixed font is needed. Questions ## Split hero: common questions Does Split hero need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Split hero match my theme? Choose by variation. Split hero takes your theme’s palette; Folio brings its own colours. How many variations does Split hero have? 2: Split hero and Folio. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Split hero free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. 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. Read the markup #### 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 Free Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, column, columns, group, heading, paragraph Presets color 6, spacing 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Hero Explore all 32 Hero patterns (https://patternpaste.com/patterns/hero/) 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) Shot in Twenty Twenty-Five Hero No plugin needed ### 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. Hero Preview pattern (https://patternpaste.com/pattern/hero-aperture.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero arch A shop or studio hero with the photograph cut into an arch, rounded across the top and square at the foot, beside a display headline, a short lead and two actions. Hero Preview pattern (https://patternpaste.com/pattern/hero-arch.html)