# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/pricing-tiers.html Section: Pricing Access: Free, and free to keep. Needs: 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. Blocks: button, buttons, column, columns, group, heading, list, list-item, paragraph, separator Keywords: pricing, tiers, plans, columns ## Variations (3) ### Pricing tiers (the default) Identical markup in every theme. ### Blush and plum This variation states its own colours and states its own type: identical in every theme. The Start, Grow and Studio card trio states blush, deep plum and Arial. Monthly and annual prices are visible together, with the annual saving marked. ### Dual price cards Identical markup in every theme. Three plan cards, each giving the monthly price and the yearly price with its saving, the middle plan marked as the one most chosen, in your theme's colours and type. --- ## 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 `small` preset. `small` is 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 1. **The prices.** They ship as `£00`, `£00` and `£000` with 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. 2. **The tier names and the button labels.** "Solo", "Studio" and "Agency" are there to be overwritten, and each button needs a real link. 3. **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. 4. **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: center` so 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 type 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) ## Blush and plum A styled card trio with both monthly and annual prices in view. The highlighted Grow card states deep plum and white against a blush ground; Arial titles and figures keep the SaaS character. Replace the prices and destinations before use.