Pricing tiers: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/pricing-tiers.html Core Patterns (https://patternpaste.com/patterns/) Pricing (https://patternpaste.com/patterns/pricing/) Free Standard # Pricing tiers Three pricing tiers where the recommended one is genuinely taller than its siblings and inverts to a contrast ground behind a 2px edge on that same chain, so the recommendation is structural rather than a badge. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The prices. They ship as £00, £00 and £000 with the line "Per month, placeholder figure" beneath them. - The tier names and the button labels. "Solo", "Studio" and "Agency" are there to be overwritten, and each button needs a real link. - The feature lists. Keep the featured tier's list one item longer than the others: that extra line is part of what makes the middle panel taller. - Which tier is featured, if it is not the middle one. The signature moment ## A panel that breaks the grid The recommended tier does not wear a "Most popular" pill. It is taller than its two siblings, and it inverts: a dark contrast ground with light base text, edged by a 2px border on the same contrast chain as its own ground, while the panels either side stay on the section's own ground behind a hairline that follows your text colour. The featured panel therefore reads as one solid block with a crisp edge, and not as a ring whose brightness the theme decides: the border was on an accent chain until 2026-08-22, which is a structural mark on a slug whose luminance is unknowable, and in a theme where the accent is pale that ring is the one place the composition is loudest and the least visible. Theme handoff ## What comes from where ### From your theme - Every colour. - The typeface. - The spacing scale. - Button shape, link colour and list styling ### Set by this pattern - proportions - type ramp - inversion - Hairlines follow your text. - 1240px inner measure - The feature lists state their own size 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 Three plans across a full-width section: a centred intro, then three panels. ### The signature moment: a panel that breaks the grid The recommended tier does not wear a "Most popular" pill. It is taller than its two siblings, and it inverts: a dark contrast ground with light base text, edged by a 2px border on the same contrast chain as its own ground, while the panels either side stay on the section's own ground behind a hairline that follows your text colour. The featured panel therefore reads as one solid block with a crisp edge, and not as a ring whose brightness the theme decides: the border was on an accent chain until 2026-08-22, which is a structural mark on a slug whose luminance is unknowable, and in a theme where the accent is pale that ring is the one place the composition is loudest and the least visible. The two outer panels are vertically centred against it, so the middle one overhangs top and bottom by an equal amount. The recommendation is carried by geometry: you read it before you read a word of it. The middle panel also carries a larger price and one more line in its list, so the extra height is earned by content rather than faked with padding alone. A small "Recommended" label sits at the top of it, but the label is a caption on the idea, not the idea. Below 782px WordPress stacks columns, and the height difference stops meaning anything. At that width the inversion is what carries the recommendation, and it carries it on its own. Make it yoursVariations and the edits to make first ### What you change first - The prices. They ship as £00, £00 and £000 with the line "Per month, placeholder figure" beneath them. They are placeholders on purpose, not a suggested price. Replace the figures, the currency and that line. - The tier names and the button labels. "Solo", "Studio" and "Agency" are there to be overwritten, and each button needs a real link. - The feature lists. Keep the featured tier's list one item longer than the others: that extra line is part of what makes the middle panel taller. - Which tier is featured, if it is not the middle one. Move the inverted group and the "Recommended" label to the column you want, and give the column you moved it away from verticalAlignment: center so the alignment still works. If you want a fourth tier, drop the column widths to roughly 25 percent each and expect the row to stack sooner in practice; four panels at this density gets tight well before WordPress's own 782px breakpoint. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme Everything that makes it look like your site: - Every colour. The section ground, the text, the panel fills and the featured panel's border are all preset chains. The pattern names the colour role it wants and falls back through your theme's likely slugs to a WordPress core default, so it resolves in a theme with a full palette and in a theme with almost none. - The typeface. The pattern states no font family anywhere, in any block. - The spacing scale. All padding and vertical rhythm use core spacing presets, which your theme is free to redefine. The same pattern is looser in a spacious theme and tighter in a dense one, by design. - Button shape, link colour and list styling, from your theme's element styles. ### What it decides for itself - The proportions: 30 / 40 / 30 columns, and the vertical alignment that makes the middle panel overhang. - The type ramp: prices set with clamp() so they scale with the viewport, tight negative tracking on the prices, wide tracking on the uppercase tier names and labels, and a deliberate jump in size between the featured price and the other two. - The inversion, which is confined to the one featured panel and never applied to the whole section. - Hairlines follow your text. Panel borders and the rules under each price use currentColor, so they can never mismatch the colour of the words beside them. - A 1240px inner measure inside a full-width band, and a narrower 660px measure for the intro so the lede does not run as a wall of type. - The feature lists state their own size, a clamp from 15px to 16px, rather than taking the small preset. small is guaranteed to exist, which is not the same as being readable: in a theme that defines no size scale it resolves to core's 13px, and a plan's features are read rather than glanced at. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(2.5rem, 4vw, 3.25rem) - paragraph at clamp(3.25rem, 5.4vw, 4.5rem) Technical notesBlock mechanics, responsive behaviour and constraints ### Blush and plum A styled card trio with both monthly and annual prices in view. The highlighted Grow card states deep plum and white against a blush ground; Arial titles and figures keep the SaaS character. Replace the prices and destinations before use. Questions ## Pricing tiers: common questions Does Pricing tiers need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, list, list-item, paragraph and separator), so it pastes into the block editor with nothing to install. Will Pricing tiers match my theme? Choose by variation. Pricing tiers and Dual price cards take your theme’s palette; Blush and plum brings its own colours. How many variations does Pricing tiers have? 3: Pricing tiers, Blush and plum and Dual price cards. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Pricing tiers 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 FAQ Emergency triage list An emergency page section for a trade: a header with a legend of three verdict tags, then seven ruled rows sorted by urgency, each the problem as a card title, what to do now, and a verdict tag at the right: ring now, book it, or ring the gas line first. States no colour and no font of its own. (https://patternpaste.com/pattern/emergency-triage-list.html)Tables Compare matrix A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-matrix.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 Pricing 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 button, buttons, column, columns, group, heading, list, list-item, paragraph, separator Presets color 7, spacing 6, font-size 1 WordPress 7.0+ Continue exploring ## Next in Pricing Explore all 16 Pricing patterns (https://patternpaste.com/patterns/pricing/) Shot in Twenty Twenty-Five Pricing No plugin needed ### Studio service menu Studio service menu: a sliding service menu becomes all offers shown. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-studio-menu.html) Shot in Twenty Twenty-Five Pricing No plugin needed ### Website care Website care: service scopes beside prices, expandable plan scopes. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-website-care.html) Shot in Twenty Twenty-Five Pricing No plugin needed ### Rates day sheet A freelancer’s rates as one printed rate card: a short introduction and a single booking button beside a card with a heavy masthead rule, three ruled rows each naming the rate, what it covers and what it includes, with the price set at display size in the right margin, and the terms (deposit, usage, travel, weather) as small print at the foot. Pricing Preview pattern (https://patternpaste.com/pattern/rates-day-sheet.html)