Pricing single: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/pricing-single.html Core Patterns (https://patternpaste.com/patterns/) Pricing (https://patternpaste.com/patterns/pricing/) Catalogue access Standard # Pricing single One plan, set as a collision of scales: a price at display size in the left column against a packed ledger of ten ruled currentColor rows in the right, with one action and one reassurance line under the figure. For a product with a single price, where three columns would be an invention. The figure ships as an obvious placeholder. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The price. It ships as £00 with "A year, placeholder figure" under it. - The button label and its link. The button ships without a URL. - The ten rows. Keep them short and keep them many: one line each is what makes the ledger read as texture against the price. - The reassurance line. It sits under the action and answers the one objection a single price raises. The signature moment ## The scale collision A price at display size sits directly beside a packed ledger of ruled rows, and there is nothing in between. The figure is a clamp() running to 7.5rem with tracking pulled in to -0.05em. Ten inches to its right, the list of what you get is set at 15 to 16px on 1.45 line-height, each item in its own hairline-ruled row with no gap between rows, so eleven currentColor rules stack into a block of texture. Theme handoff ## What comes from where ### From your theme - Every colour. - The typeface. - The spacing scale. - Button shape ### Set by this pattern - The 44 / 56 split. - The type ramp. - currentColor for all eleven rules. - Rows that butt. - A 1240px measure inside a full-bleed band 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 plan, one price, one action. It is the pricing section for a product that does not have tiers, and the answer to a page where three columns would be an invention rather than a description. pricing-tiers is the other pricing pattern in the catalogue: three plans where the recommended one is physically taller and inverts, so the recommendation is carried by geometry. This one has nothing to recommend between. Its whole job is to make a single number feel like a decision rather than a line item. ### The signature moment: the scale collision A price at display size sits directly beside a packed ledger of ruled rows, and there is nothing in between. The figure is a clamp() running to 7.5rem with tracking pulled in to -0.05em. Ten inches to its right, the list of what you get is set at 15 to 16px on 1.45 line-height, each item in its own hairline-ruled row with no gap between rows, so eleven currentColor rules stack into a block of texture. The two halves are the same section and refuse to meet in the middle. Nothing between the two sizes is allowed to exist: no sub-headings inside the list, no mid-sized summary of the plan, no icons. That gap is the composition, and it is what a buyer remembers about the section a week later. The list also does the argument. A single price only reads as good value when the thing being bought is dense, so the rows are deliberately many and deliberately short: ten one-line facts, none of them padded out to a sentence. Below 782px WordPress stacks the two columns. The price lands first at full width and the ledger runs under it, which is the same collision read top to bottom instead of left to right. Make it yoursVariations and the edits to make first ### What you change first - The price. It ships as £00 with "A year, placeholder figure" under it. That is a placeholder, not a suggested price, and it is written to look like one so it cannot be shipped by accident. Replace the figure, the currency and that line. If you bill monthly, say so there; the pattern does not assume a period. - The button label and its link. The button ships without a URL. Set it, and make the label a verb. - The ten rows. Keep them short and keep them many: one line each is what makes the ledger read as texture against the price. To add a row, select any row group and duplicate it; the rule comes with it. Do not let a row wrap to three lines, or the block of texture becomes a block of paragraphs. - The reassurance line. It sits under the action and answers the one objection a single price raises. Replace it with yours, or delete it. ### Variations - Night plan. The colour axis. The whole band inverts to your contrast with your base on it, the action inverts back so it reads as a lit panel on a dark ground, and the ten rules follow the type because they are currentColor. Both slugs exist in every stock block theme, so unlike a tinted ground this arrives everywhere. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Every colour. The band's ground, the type, the button's pair and the ten rules are preset chains or currentColor. The pattern names the role it wants and falls back through your theme's likely slugs to a colour WordPress itself guarantees, so nothing in it can resolve to nothing. - The typeface. No font family is stated anywhere, in any block. The price is set in whatever face your theme sets its body in, which is the point: a display numeral is the most theme-specific thing on the page. - The spacing scale. The band's padding and the vertical rhythm are core spacing presets, so the section is looser in a spacious theme and tighter in a dense one. - Button shape, from your theme's element styles. The pattern sets the button's two colours and its padding and nothing else. ### What it decides for itself - The 44 / 56 split. The narrower column holds the bigger thing. That imbalance is why the price reads as an announcement and the list reads as fine print that happens to be legible. - The type ramp. Price at clamp(4.5rem, 9vw, 7.5rem) on line-height 1; heading held down to 1.75rem so it never competes with the figure; list rows at clamp(0.9375rem, 1vw, 1rem). The rows state their own size rather than taking the small preset, which is core's 13px in a theme with no size scale and is not a size to set ten lines of read-it-to-decide text at. - currentColor for all eleven rules. They can never mismatch the words beside them, and they invert with the band without being touched. - Rows that butt. The list wrapper sets blockGap: 0 and each row carries a top border, with a closing bottom border on the wrapper. There are no core/separator blocks in the pattern, so nothing here can render as a centred 100px stub in a theme that narrows separators. - A 1240px measure inside a full-bleed band, and its own top and bottom padding, so it can sit between any two sections without borrowing air from either. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(4.5rem, 9vw, 7.5rem) Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - Core blocks only: group, columns, column, paragraph, heading, buttons, button. No plugin, no script, no stylesheet, nothing to keep updated. - The heading and the price both state their own text colour rather than inheriting the band's. A theme's heading element style beats an inherited group colour, which is how a headline ends up the same colour as its own band. - The preview shows the colours one stock theme resolves. Your site resolves your own presets, including anything you have saved in the Styles panel; the promise is that the pair cannot blank and stays legible, not that it will be these colours. Questions ## Pricing single: common questions Does Pricing single need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Pricing single 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 Pricing single have? 2: Paper plan and Night plan. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Pricing single free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 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. 12KB of core-block markup, 7 blocks (button, buttons, column, columns, group, heading, 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 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 Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks button, buttons, column, columns, group, heading, paragraph Presets color 5, spacing 5, 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 ### The Reading Room A quarterly print journal and digital archive, with native FAQ disclosures and a paired reader edition. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-reading-room.html) 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 ### 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. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-tiers.html)