Two plans, head to head, fifty-fifty, with the saving stated in the gap between them. It is the two-plan section: 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.
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/buttoncarrying typography is valid in WordPress 7.0 and reported as invalid content in 6.6, which is the oldest version this catalogue supports. - 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-tierswith 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
smallpreset, 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;smallis kept only for the tracked capitals. - The footnote is held to 26rem, in a nested constrained group rather than by a
padding-righttrick, so the placeholder note reads at about 70 characters instead of running the full 1240px band.
What you change first
- The two figures and the saving. They ship as
£00,£000and "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.
What happens on a phone101 words
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 the Ledger seam variation, which is built that way: the plans become two ruled rows with the figure and the action on the right, and the saving sits on the rule between them.
Display type18 words
Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(2.75rem, 4.6vw, 4rem)
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: Ledger seam
Fetching the markup…