Feature lead and list, Pattern Paste Canonical: https://patternpaste.com/pattern/feature-lead-list.html Core Patterns (https://patternpaste.com/patterns/) Features (https://patternpaste.com/patterns/features/) Free Standard # Feature lead and list One feature carried at display size across half the band, with three compact ruled entries opposite it. The weighting is the point: the lead argues, the three answer, and nothing on the page pretends the four are equal. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The lead heading. It is the sentence the section exists to say. - The lede. Two lines. - The three entries. Four to six words in the heading, one sentence under it. - The closing line under the lead. A tracked uppercase note, and the only place in the section where the same thing is said twice. - The number of entries. Duplicate an entry group. The signature moment ## Weight asymmetry across the seam One point is the argument and the other three are the answer. The lead is set at up to 3.5rem with a lede beneath it and no rule anywhere near it; the three entries opposite are set at around 1.25rem, each closed top and bottom by a hairline, in a column that reads as a ledger. The two halves are almost the same width and nothing like the same weight, so the eye lands on the lead, then runs down the list, and the page has told you which feature you are actually buying before you have read a word. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - The rules. ### Set by this pattern - Full bleed with its own measure. - The split. - The ramp. - Where it stacks. 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 One feature carried at display size across half the band, with three compact ruled entries opposite it. Every other feature pattern in the catalogue weights its points equally: three even columns, four equal rows, four points hung off a spine. This one does not, and that is the whole design. ### The signature moment: weight asymmetry across the seam One point is the argument and the other three are the answer. The lead is set at up to 3.5rem with a lede beneath it and no rule anywhere near it; the three entries opposite are set at around 1.25rem, each closed top and bottom by a hairline, in a column that reads as a ledger. The two halves are almost the same width and nothing like the same weight, so the eye lands on the lead, then runs down the list, and the page has told you which feature you are actually buying before you have read a word. The rules do the second half of the work. The list is entirely ruled and the lead is not, apart from one hairline under its closing line, so the seam between them is a change of density rather than a divider. ### Why this is not feature-lead-row feature-lead-row turns the same asymmetry through ninety degrees: the lead runs across the top of the band at its largest, held to a 52rem measure, and the three entries sit under it as a ruled row of thirds. It is the one to take when the lead needs to be the first thing on the page rather than the left thing, and when the three points are closer to equals. This one is the denser of the two and the one to take when the section has to sit shorter, because the lead and the ledger share a line rather than queue up. Make it yoursVariations and the edits to make first ### What to change first - The lead heading. It is the sentence the section exists to say. Ten to fourteen words is the shape it is tuned for. - The lede. Two lines. Three still reads; one leaves the lead column short against the ruled list beside it. - The three entries. Four to six words in the heading, one sentence under it. They are deliberately too small to argue, so do not try to make them. - The closing line under the lead. A tracked uppercase note, and the only place in the section where the same thing is said twice. Delete the group if it is not true of your plans. - The number of entries. Duplicate an entry group. Keep the bottom hairline on whichever entry ends up last: it is a border on that group, not a separate block. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. The display lead and the compact entries are both set in your face, and the size gap between them is what carries the design in a serif theme and in a sans one. - Your colours. The ground asks for base and everything on it asks for contrast, each written as a fallback chain ending on a colour WordPress itself guarantees. Nothing here can resolve to nothing. - Your spacing scale. The band's padding, the gap between the two halves and the padding inside each ruled entry are spacing presets. - The rules. Every hairline is currentColor, so it is exactly the colour of the text beside it, on either ground. ### What it decides for itself - Full bleed with its own measure. The section spans the viewport and holds its content to 1240px. - The split. 54% to the lead and 46% to the list, with a gutter that grows from 2rem to 4.5rem. The lead is the wider half by a little and the louder half by a lot. - The ramp. A 14px tracked label, the lead heading from 2.25rem to 3.5rem at line-height 1.05, a lede from 1.0625rem to 1.25rem, entry headings from 1.125rem to 1.3125rem, and entry copy with a 15px floor. Nothing in the section uses a bare font-size preset, because core's small is 13px. - Where it stacks. Below 782px WordPress stacks the two halves, so the lead comes first and the ruled list follows it. The asymmetry survives as sequence: the loud thing, then the ledger. Technical notesBlock mechanics, responsive behaviour and constraints ### The Linen and petrol look A Styled variation for an accountant or consultant, with its own colours, type and copy. The lead is a fixed-fee service on a petrol #0d5c6e column in linen #f4efe6 type, closed by a ruled foot with its price and a square linen button; opposite, five ruled services in near-black ink #1d2a31, each with its price in petrol. The plate is the column itself, so it runs the full height of the list. Headings are Baskerville (falling back to Georgia), copy Helvetica. Every text pair is measured on its painted ground above 4.5:1. Take the base if you want your theme's colours. ### Notes - Core blocks only: group, columns, column, heading, paragraph. No plugin, nothing to keep updated. - The entries are wrapped in a group with a zero block gap, so consecutive rules sit tight against each other's padding and the column reads as one ledger. - Text is measured at 4.5:1 against the ground it actually sits on; the lead heading qualifies as large text at 3:1 but is held to the same pair as the copy, because it uses the same chain. Questions ## Feature lead and list: common questions Does Feature lead and list need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Feature lead and list match my theme? Choose by variation. Lead and list and Priced lead and list take your theme’s palette; Linen and petrol brings its own colours. How many variations does Feature lead and list have? 3: Lead and list, Linen and petrol and Priced lead and list. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Feature lead and list free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription. 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. Its Styled looks come with a subscription. Read the markup 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 Hero 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. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)How it works First visit to scale What happens at a first appointment, drawn to scale: a bar of the whole appointment split into three solid segments whose widths are each step's share of the minutes, a scale line under it, then the three steps at the same widths, stacking on a tablet and a phone, with a title and a line each, and a closing note with one button. States no colour and no font of its own. (https://patternpaste.com/pattern/first-visit-to-scale.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 Features Access Free Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks column, columns, group, heading, paragraph Presets color 5, spacing 6, font-size 3 WordPress 7.0+ Continue exploring ## Next in Features Explore all 37 Features patterns (https://patternpaste.com/patterns/features/) Shot in Twenty Twenty-Five Features No plugin needed ### Feature landscape lap A broad landscape photograph with a large paper text panel overlapping its lower edge, an oversized heading and one clear action. Features Preview pattern (https://patternpaste.com/pattern/feature-landscape-lap.html) Shot in Twenty Twenty-Five Features No plugin needed ### Lead over three One feature carried across the top of the band at display size, with three compact ruled entries in a row beneath it. Features Preview pattern (https://patternpaste.com/pattern/feature-lead-row.html) Shot in Twenty Twenty-Five Features No plugin needed ### Feature media callout duo Two stacked landscape feature cards pairing 16:9 media viewports with structured technical capability breakdowns and callouts. Features Preview pattern (https://patternpaste.com/pattern/feature-media-callout-duo.html)