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.
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
smallpreset.smallis 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.
What you change first
- The prices. They ship as
£00,£00and£000with 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: centerso 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.
Display type24 words
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)
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…