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.
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 atclamp(0.9375rem, 1vw, 1rem). The rows state their own size rather than taking thesmallpreset, 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. currentColorfor 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: 0and each row carries a top border, with a closing bottom border on the wrapper. There are nocore/separatorblocks 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.
What you change first
- The price. It ships as
£00with "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.
Variations60 words
- Night plan. The colour axis. The whole band inverts to your
contrastwith yourbaseon 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 arecurrentColor. Both slugs exist in every stock block theme, so unlike a tinted ground this arrives everywhere.
Notes105 words
- 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.
Display type18 words
Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(4.5rem, 9vw, 7.5rem)
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: Night plan
Fetching the markup…