Feature spine: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/feature-spine.html Core Patterns (https://patternpaste.com/patterns/) Features (https://patternpaste.com/patterns/features/) Catalogue access Standard # Feature spine A feature set built around one unbroken hairline, with short points and WordPress photographs alternating across the centre. The pictures give each point a visual counterweight; on a phone the rows become an illustrated sequence. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The copy. Four labels, four headings, four sentences. - The count. Add or remove a row by copying a whole core/columns block and swapping which side the content column sits on. - The air either side of the spine. That is the block gap on each row, a clamp(). - The section padding. Vertical padding uses the largest core spacing preset. The signature moment ## The spine One unbroken vertical rule down the centre of the section, with the points alternating either side of it, facing cropped photographs. The type ramp is quiet, the labels are small, and each photograph balances the point across the rule. The continuous 1px line joins the illustrated rows. Take the spine out and there is no pattern left, which is the test of whether a device is structural rather than decorative. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Every rule in the section. - Spacing scale. ### Set by this pattern - The centre. - Contiguity. - Full bleed with a 1240px inner. - The ramp. 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 feature set for the middle of a page: a short intro, then points and photographs hung off one hairline that runs down the centre of the section. It states its own ground and its own vertical padding, so it can sit between two other sections without borrowing air from either of them. ### The signature moment: the spine One unbroken vertical rule down the centre of the section, with the points alternating either side of it, facing cropped photographs. The type ramp is quiet, the labels are small, and each photograph balances the point across the rule. The continuous 1px line joins the illustrated rows. Take the spine out and there is no pattern left, which is the test of whether a device is structural rather than decorative. The spine is drawn as one zero-width column carrying a single left hairline, repeated once per row with no gap above or below it, so the segments touch and read as one line rather than four. It is currentColor, so it cannot blank and it follows your text colour wherever your theme puts it. Each point sits under its own short rule, running from the outer edge of the section in towards the spine. Those rules are what tie the alternating halves to the centre, and they are also the pattern's answer to a phone. Make it yoursVariations and the edits to make first ### What you change first - The copy. Four labels, four headings, four sentences. Keep the headings to three or four words: they sit on one line in half the width of the section. - The count. Add or remove a row by copying a whole core/columns block and swapping which side the content column sits on. Keep it even, or the last rib will hang on the same side as the one before it. Six is comfortable; eight starts to read as a list rather than a set. - The air either side of the spine. That is the block gap on each row, a clamp(). Widen it and the section reads as two columns; narrow it and it reads as one ledger. - The section padding. Vertical padding uses the largest core spacing preset. Step it down if this section lands between two others that already bring their own air. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The pattern states no font family anywhere. Labels, headings and body copy are all set in your face, serif or sans. - Palette. The ground is your base and the type is your contrast, each 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. The inverted variation swaps exactly those two. - Every rule in the section. The spine and the four ribs are currentColor. They need no chain, they cannot resolve to nothing, and they follow the text into a dark style variation without being restated. - Spacing scale. The section's padding, the space above the run and the air inside each row are core spacing presets, so they move with your theme's own rhythm. ### What it decides for itself - The centre. Both halves are 50%, so the spine lands on the middle of the section rather than near it. That is why the air either side of the spine is a block gap and not padding: a gap is symmetrical and it disappears when the row stacks, where padding on one side only would indent every other point on a phone. - Contiguity. Each row states a zero top and bottom margin and the run sets its block gap to zero, because core gives every columns block a default bottom margin. One unclosed gap and the spine is four lines rather than one. - Full bleed with a 1240px inner. The section spans the viewport; the intro is held to a 46rem measure inside it so the lede reads at a comfortable length instead of running the width of the band. - The ramp. A display heading with tight negative tracking, a widely tracked 13px label over each point, and body copy at 16px and up on a half-width measure of roughly 65 characters. Proportion is the whole of the design here, because colour is not ours to spend. Technical notesBlock mechanics, responsive behaviour and constraints ### What happens at 390, and why Below 782px WordPress stacks columns, and there is no argument with that: it is core's own rule at a specificity nothing in a pattern can beat. A centre rule cannot survive stacking honestly. Left where it is, it becomes a rule down the edge of every other point, which reads as a mistake rather than as a spine. So the decision here is that the spine stands down on a phone rather than pretending. The column that carries it holds nothing, so when the row stacks it collapses to zero height and the hairline goes with it, on every row equally. No half-spine, no rule beside two points out of four, no indent on the even ones. What is left is the ribs. The short rule above each point becomes a full-width divider, so the section reads at 390 as an illustrated sequence, with pictures alternating before and after the point they accompany. The structure changes shape; it never goes missing, and it never lies about being something it is not. ### Included photographs The WordPress sample photographs are part of the copied image blocks, with 16:9 crops and descriptive alt text. Replace a photo in the editor and update its alt text to describe your replacement. Image credits (https://patternpaste.com/image-credits/) records the sources. The night variation keeps the same pictures. Questions ## Feature spine: common questions Does Feature spine need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Feature spine 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 Feature spine have? 2: Paper spine and Night spine. 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 Feature spine free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 15KB of core-block markup, 6 blocks (column, columns, group, heading, image, 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 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/) 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 Features Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, heading, image, 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 ### Signal field A three-part editorial header above a narrow field label and four numbered capability cells, closed by a quiet action. Features Preview pattern (https://patternpaste.com/pattern/feature-signal-field.html) Shot in Twenty Twenty-Five Features No plugin needed ### Feature split dense An asymmetrical 40/60 split pairing a strong left-hand headline pillar with a dense four-row capability ledger on the right. Features Preview pattern (https://patternpaste.com/pattern/feature-split-dense.html) Shot in Twenty Twenty-Five Features No plugin needed ### Feature stagger strip Three vertical feature columns arranged in a staggered descending rhythm with top margin offsets and hairline-bordered cards. Features Preview pattern (https://patternpaste.com/pattern/feature-stagger-strip.html)