Pricing duo: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/pricing-duo.html Core Patterns (https://patternpaste.com/patterns/) Pricing (https://patternpaste.com/patterns/pricing/) Free Standard # Pricing duo Two ways to pay for the same thing, head to head and equal, with the saving set in the ruled channel that runs between them. Neither side is taller, tinted or badged: the seam does the arguing. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The two figures and the saving. They ship as £00, £000 and "Save 00%", all placeholders, and the saving is the one number here that has to be true. - The plan names and the button labels, and give each button a real link. - The two feature lists. Keep them the same length. - The channel's width, if your saving line is long. The signature moment ## The seam carries the type The two plans are separated by a narrow column closed with a hairline down each side, and that channel is where the saving is set, in small tracked capitals. No other pricing pattern in the catalogue puts type in the gutter. Theme handoff ## What comes from where ### From your theme - Every colour. - The typeface - Button shape, link colour and list markers - The spacing scale ### Set by this pattern - The proportions - The symmetry. - The type ramp - The feature lists state their own size - The footnote is held to 26rem 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 Two plans, head to head, fifty-fifty, with the saving stated in the gap between them. It is the two-plan section read across: pricing-ledger sets the same argument down the page as two ruled entries, pricing-tiers invents a third tier for everybody, and pricing-single has nothing to compare against. ### The signature moment: the seam carries the type The two plans are separated by a narrow column closed with a hairline down each side, and that channel is where the saving is set, in small tracked capitals. No other pricing pattern in the catalogue puts type in the gutter. Everything else is symmetrical on purpose. The two plans have the same padding, the same type ramp, the same number of lines in their lists and the same outlined button. Neither is taller, neither is filled, neither wears a badge. The whole argument for paying yearly is the eight percent of the width between them, and a reader who looks at the two figures has to cross it to compare them. The channel's hairlines are currentColor, so they are always exactly the colour of the words either side, in any theme, and the type in the channel is aligned with the plan names across it. Make it yoursVariations and the edits to make first ### What you change first - The two figures and the saving. They ship as £00, £000 and "Save 00%", all placeholders, and the saving is the one number here that has to be true. - The plan names and the button labels, and give each button a real link. - The two feature lists. Keep them the same length. The symmetry is what makes the seam the only thing arguing. - The channel's width, if your saving line is long. It is a column width like any other; widen it to ten or twelve per cent and take the difference off the two plans equally. The line wraps rather than overflowing, so a long saving in a narrow channel costs you height, not layout. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Every colour. The band's ground and text are preset chains ending on a WordPress core default; every rule, the channel's hairlines and the button outlines included, is currentColor. - The typeface, entirely. The pattern states no font family. - Button shape, link colour and list markers, from your theme's element styles. The buttons state no typography of their own, deliberately: a core/button carrying typography does not stay valid across editor versions. - The spacing scale, through core spacing presets. ### What it decides for itself - The proportions: 46 / 8 / 46, with the middle eight per cent given to nothing but a line of type and two hairlines. - The symmetry. Equal lists, equal buttons, equal weight. It is a real design decision and the one thing not to undo casually: the moment one side is louder, the section becomes pricing-tiers with a tier missing. - The type ramp: figures at a clamp() from 44px to 64px with tight negative tracking, against tracked capitals at 13px for the plan names and the saving. The gap between those two sizes is the whole hierarchy. - The feature lists state their own size, a clamp from 15px to 16px, rather than the small preset, which is 13px in a theme with no size scale. The footnote under the pair states the same clamp, because it is a sentence a visitor reads; small is kept only for the tracked capitals. - The footnote is held to 26rem, in a nested constrained group rather than by a padding-right trick, so the placeholder note reads at about 70 characters instead of running the full 1240px band. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(2.75rem, 4.6vw, 4rem) Technical notesBlock mechanics, responsive behaviour and constraints ### What happens on a phone Below 782px WordPress stacks the columns, so the order becomes plan, saving, plan. The channel stops being vertical: it lands as a full-width row between the two plans with a short hairline at each end, holding the saving line, which is the same reading order and the same argument in the shape a phone can carry. If you would rather the seam were horizontal at every width, take pricing-ledger, which is built that way: the plans become two ruled entries stacked down the page with the figure and the action in the right-hand column, and the saving sits between the hairlines that separate them. Questions ## Pricing duo: common questions Does Pricing duo 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 duo 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. Is Pricing duo free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. 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. Read the markup #### 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 1 Colour From your theme Type From your theme Motion None Blocks button, buttons, column, columns, group, heading, list, list-item, paragraph, separator Presets color 6, spacing 6, font-size 2 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 ### Pricing cover menu A screen-height cover with three plans set on it like a restaurant menu: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left and a narrow ruled price list in the right-hand column, each plan a name and its price on one line and a sentence beneath, hairline rules between, one button under the list. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-cover-menu.html) Shot in Twenty Twenty-Five Pricing No plugin needed ### Flagship Offer A single launch package price beside five included pieces and three native FAQ disclosures. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-flagship-offer.html) Shot in Twenty Twenty-Five Pricing No plugin needed ### Two plans as a ledger Two ways to pay set as two ledger entries, one above the other: the plan name and what it includes on the left, the figure and its outlined action in the right-hand column, and the saving between them in tracked capitals, held between two hairlines that run the whole measure. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-ledger.html)