Feature grid: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/feature-grid.html Core Patterns (https://patternpaste.com/patterns/) Features (https://patternpaste.com/patterns/features/) Free Standard # Feature grid An even three-column feature set with generous gutters, built around oversized index numerals set at display size where a small label would normally sit. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The copy. Three headings and three sentences. - The count. Add or delete a column and renumber. - The numeral colour. It is a chain, so the fastest change is to swap the first rung for whichever accent slug your theme actually uses. - The section padding. The vertical padding uses the largest core spacing preset. The signature moment ## Structural numerals The index numbers are the structure, not decoration. 01, 02 and 03 are set at display size, larger than the headings they introduce, in the slot where a small uppercase label would normally sit. Each one hangs off a hairline rule that runs the full width of its column, so the three rules and the three numerals form the grid you actually read the section by. Remove the numerals and the pattern loses its shape, which is the test of whether a device is structural. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Spacing scale. - Rules. ### Set by this pattern - Proportion. - The grid. - The intro measure. - Emphasis. 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 three-part feature set: a display heading, one line of supporting copy, then an even three-column grid with generous gutters. Core blocks only, so there is nothing to install and nothing to keep updated. ### The signature moment: structural numerals The index numbers are the structure, not decoration. 01, 02 and 03 are set at display size, larger than the headings they introduce, in the slot where a small uppercase label would normally sit. Each one hangs off a hairline rule that runs the full width of its column, so the three rules and the three numerals form the grid you actually read the section by. Remove the numerals and the pattern loses its shape, which is the test of whether a device is structural. The numerals are large text and are colour-filled from your palette rather than from ours. Everything else in the section is held to a quiet floor so the numerals stay the one thing you remember. Make it yoursVariations and the edits to make first ### What you change first - The copy. Three headings and three sentences. Keep the headings to three or four words so they sit on one line beside a numeral that size. - The count. Add or delete a column and renumber. Four columns still work at this measure; five will crowd the numerals, and at that point drop the numeral size a step. - The numeral colour. It is a chain, so the fastest change is to swap the first rung for whichever accent slug your theme actually uses. If you would rather the numerals matched the body text, delete the colour attribute entirely and they inherit contrast. - The section padding. The vertical padding uses the largest core spacing preset. Step it down if this section sits between two others that already carry their own air. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme Effectively all of the look: - Typeface. The pattern states no font family anywhere. Headings, numerals and body copy all take whatever your theme sets, serif or sans. - Palette. The ground is your base, the text is your contrast, and the numerals prefer your accent-2 before falling back to contrast. Each of these is a fallback chain ending on a colour WordPress itself guarantees, so the section paints in a theme with a full palette and still paints in a theme with none. - Spacing scale. Section padding, the gutters between columns and the gaps inside each column all use the core spacing presets, so they resize with your theme's own rhythm rather than fighting it. - Rules. The hairline above each numeral is drawn in currentColor, so it follows your text colour wherever your theme puts it, including in a dark style variation. ### What it decides for itself - Proportion. The numeral scale, the tight negative tracking on the display type and the relaxed line height on the small body copy are the pattern's own, because that ramp is the design. - The grid. Three even columns with a wide gutter, full-bleed ground with a 1240px constrained inner. Below 782px WordPress stacks the columns to one, and the rule-plus-numeral pairing keeps each item reading as a distinct step rather than a run-on list. - The intro measure. Heading and lede share a 640px measure inside the 1240px grid, so the supporting line reads at a comfortable length instead of running the full width of the section at tablet size. Widen it and the lede becomes a wall; the grid below is the wide element and the intro is not. - Emphasis. The numerals are deliberately larger than the headings. That inversion is the point of the pattern. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(3.5rem, 6.5vw, 5.25rem) Technical notesBlock mechanics, responsive behaviour and constraints ### The Navy and signal yellow look A Styled variation for a trade, with its own colours, type and copy (an electrician). Navy ground #0f2240, white headings, muted #d3dbe8 copy and signal yellow #ffd100 numerals, 4px rules and a square filled button with a navy label, beside an underlined call link. It carries six services on a grid layout with a 20rem minimum column, three across at desktop and two at tablet, where the base keeps three columns. Headings and numerals are a condensed stack (Arial Narrow, Roboto Condensed, Arial), copy Arial. Every text pair is measured on navy above 4.5:1. Take the base if you want your theme's colours. Questions ## Feature grid: common questions Does Feature grid need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, paragraph and separator), so it pastes into the block editor with nothing to install. Will Feature grid match my theme? Choose by variation. Structural numerals and Numbered services take your theme’s palette; Navy and signal yellow brings its own colours. How many variations does Feature grid have? 3: Structural numerals, Navy and signal yellow and Numbered services. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Feature grid 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, separator Presets color 5, spacing 6, font-size 2 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 cover bento A short heading row, then a bento of three photograph tiles: one tall cover beside two shorter ones stacked, the tall one exactly as high as the pair and the gap between them. Features Preview pattern (https://patternpaste.com/pattern/feature-cover-bento.html) Shot in Twenty Twenty-Five Features No plugin needed ### Feature heroic spotlight A cinematic feature showcase pairing a prominent hero media plate with a 3-column capability foundation underneath. Features Preview pattern (https://patternpaste.com/pattern/feature-heroic-spotlight.html) Shot in Twenty Twenty-Five Features No plugin needed ### Feature image sidelap A tall, generous photograph meets an opaque inverted text panel that overlaps its side, with a large heading and a compact feature line. Features Preview pattern (https://patternpaste.com/pattern/feature-image-sidelap.html)