Hero ledger: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-ledger.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access Standard # Hero ledger A full-bleed opening section that doubles as a spec sheet: a display headline, a short lede and one action fill the left, while the right holds three ruled rows, each a tracked label over a value set large enough to read as content rather than fine print. The rules are currentColor and the ledger closes on a bottom rule. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The three fact rows. They are the pattern. - The headline. Six to twelve words. - The action's label and link. It ships without a URL. - The row count. Three is a spec sheet and reads as complete. The signature moment ## Density contrast The left of the section is air. An eyebrow, one display headline set tight, one lede at a comfortable measure, one action. Nothing else. Theme handoff ## What comes from where ### From your theme - The typeface. - Colour. - Every rule. - Spacing rhythm. - Button shape and hover. ### Set by this pattern - Proportion. - The two type ramps, and the gap between them. - Full bleed with its own measure. - Its own ground and its own vertical padding. - Where it stacks. - Contrast intent. 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 opening section built on core blocks only. It opens the page the way a hero should, and it answers the three questions a visitor actually has while it does it: what this is, who it is for, and when they get it. ### The signature moment: density contrast The left of the section is air. An eyebrow, one display headline set tight, one lede at a comfortable measure, one action. Nothing else. The right of the section is a ledger: three ruled rows, each a tiny widely tracked label over a value set at around 30px. The rules are hairlines in currentColor, one above each row and one closing the stack underneath, so the column reads as a ruled document rather than as a list. The idea is the collision between those two densities in one section. The headline is loud and largely empty; beside it, packed into 38% of the width, sit three facts set at a size that says they are content and not fine print. A hero usually asks you to take its word for something. This one shows its working next to the claim. If you already have split-hero, note the difference on purpose: that pattern's right column is a bordered panel of 11px metadata sitting under an overrunning bar, and it is deliberately quiet. This one is the opposite move: no panel, no box, open ruled rows carrying real values large enough to be read from across the room. Make it yoursVariations and the edits to make first ### What to change first - The three fact rows. They are the pattern. Keep the labels to two or three words and the values to a short clause: delivery time, guarantee, region, stack, price. If a value runs past two lines at your widths, cut it rather than shrinking it, because the size is the point. - The headline. Six to twelve words. It is built to break over two or three lines against the ledger; a headline that runs to five loses the contrast. - The action's label and link. It ships without a URL. Make the label a verb. - The row count. Three is a spec sheet and reads as complete. A fourth row still works; a fifth turns the hero into a features section, which is a different pattern. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. Headline, labels and values all render in whatever your theme.json sets, and the pattern is built to look set in a serif theme and in a sans one. - Colour. The ground asks for base, the type asks for contrast, and both chains end on a colour WordPress itself guarantees, so nothing here can resolve to nothing in a theme that defines neither. - Every rule. The three ledger hairlines and the closing rule are currentColor. They cannot blank, they need no chain, and they follow your text colour wherever your theme puts it. - Spacing rhythm. Padding and row spacing are core spacing presets 30 to 80, which your theme rescales, so the section breathes differently in Twenty Twenty-Four than in Twenty Twenty-Five, on purpose. - Button shape and hover. The action carries wp-element-button, so your theme's button element styles apply, including its hover. ### What it decides for itself - Proportion. 56 / 38 with a wide gutter. The ledger is narrow so its values break over two lines and read as rows, and the headline is wide so it does not. - The two type ramps, and the gap between them. The headline is clamp(2.75rem, 6.2vw, 5rem) at line-height 0.94 with negative tracking; the ledger values are clamp(1.375rem, 1.9vw, 1.875rem); the labels are 13px uppercase at 0.2em. There is deliberately nothing of an intermediate size in the section. - Full bleed with its own measure. The section runs edge to edge and holds its content to 1240px rather than inheriting your body's reading width. - Its own ground and its own vertical padding. It sits on a page between other sections and does not rely on either neighbour for air or for colour. - Where it stacks. Below 782px the two columns stack, headline first, and the ledger keeps its rules and its scale: the fact rows are the part of this pattern that works best on a phone. - Contrast intent. Body text and labels sit on the base chain and aim at 4.5:1; the headline and the ledger values are large text and aim at 3:1. The hairlines are non-text marks. A chain guarantees a colour, not a particular one, so measure the pair in your own theme before you ship. Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - Core blocks only: group, columns, column, heading, paragraph, buttons, button. No plugin, no script, nothing to keep updated. - The ledger's rules are per-side group borders rather than separators, so they run the full width of the column in every theme. - The night-ledger variation is the same composition with the ground and the type swapped. Nothing structural moves, so it is a straight answer to "how loud should this section be". Questions ## Hero ledger: common questions Does Hero ledger 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 Hero ledger 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 ledger have? 2: Paper ledger and Night ledger. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Hero ledger 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. 8.8KB of core-block markup, 7 blocks (button, buttons, column, columns, 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 2 Colour From your theme Type From your theme Motion None Blocks button, buttons, column, columns, group, heading, paragraph Presets color 5, spacing 5, 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 ### Hero landscape wings A broad coastal photograph is framed by two narrow, shorter photographic wings under an oversized headline and compact introduction. Hero Preview pattern (https://patternpaste.com/pattern/hero-landscape-wings.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero measure A hero held in the left half of a wide band: a tracked eyebrow, a headline running to a 44rem measure, a lede locked to 28rem under it, and one text action ruled with a currentColor underline. Hero Preview pattern (https://patternpaste.com/pattern/hero-measure.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero media and text A hero built on Media & Text rather than columns, so the photograph runs off the side of the screen while the words stay on the page's own measure. Hero Preview pattern (https://patternpaste.com/pattern/hero-media-text.html)