Pattern Paste
Subscribe

Core Patterns Pricing

FreeStandard

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.

All patterns

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What you change first

  1. The prices. They ship as £00, £00 and £000 with the line "Per month, placeholder figure" beneath them.
  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.

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.

Theme handoff

What comes from where

From your theme

  • Every colour.
  • The typeface.
  • The spacing scale.
  • Button shape, link colour and list styling

Set by this pattern

  • proportions
  • type ramp
  • inversion
  • Hairlines follow your text.
  • 1240px inner measure
  • The feature lists state their own size

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

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.

Make it yoursVariations and the edits to make first

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.

Theme behaviourInheritance, fixed decisions and contrast

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.

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)
Technical notesBlock mechanics, responsive behaviour and constraints

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.

Questions

Pricing tiers: common questions

Does Pricing tiers need a plugin?

No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, list, list-item, paragraph and separator), so it pastes into the block editor with nothing to install.

Will Pricing tiers match my theme?

Choose by variation. Pricing tiers and Dual price cards take your theme’s palette; Blush and plum brings its own colours.

How many variations does Pricing tiers have?

3: Pricing tiers, Blush and plum and Dual price cards. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Pricing tiers free?

Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription.

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.

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. This is the file as authored; the copy button on the stage applies the finish you chose there.

16,418 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:group {"layout":{"type":"constrained","contentSize":"660px"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"center","style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.16em","fontWeight":"600"},"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"}},"fontSize":"small"} -->
<p class="has-text-color has-text-align-center has-small-font-size" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));font-weight:600;letter-spacing:0.16em;text-transform:uppercase">Plans</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"currentColor"}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:currentColor;color:currentColor"/>
<!-- /wp:separator -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"var(--wp--preset--font-size--x-large, clamp(2rem, 3.6vw, 3rem))"}}} -->
<h2 class="wp-block-heading has-text-align-center" style="font-size:var(--wp--preset--font-size--x-large, clamp(2rem, 3.6vw, 3rem))">Three plans, one design system.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}},"fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size" style="margin-top:var(--wp--preset--spacing--30)">Every plan ships the same core-block markup and inherits the same theme styles. What changes is how much of the catalogue you can take with you. Figures below are placeholders.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"var:preset|spacing|70"},"blockGap":{"top":"var:preset|spacing|40","left":"1.125rem"}}}} -->
<div class="wp-block-columns" style="margin-top:var(--wp--preset--spacing--70)"><!-- wp:column {"verticalAlignment":"center","width":"30%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:30%"><!-- wp:group {"style":{"border":{"width":"1px","color":"currentColor"},"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"clamp(1.25rem, 1.9vw, 2.25rem)","right":"clamp(1.25rem, 1.9vw, 2.25rem)"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color" style="border-color:currentColor;border-width:1px;padding-top:var(--wp--preset--spacing--50);padding-right:clamp(1.25rem, 1.9vw, 2.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(1.25rem, 1.9vw, 2.25rem)"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.14em","fontWeight":"600"},"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"}},"fontSize":"small"} -->
<p class="has-text-color has-small-font-size" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));font-weight:600;letter-spacing:0.14em;text-transform:uppercase">Solo</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"clamp(2.5rem, 4vw, 3.25rem)","lineHeight":"1","letterSpacing":"-0.04em","fontWeight":"700"}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);font-size:clamp(2.5rem, 4vw, 3.25rem);font-weight:700;letter-spacing:-0.04em;line-height:1">£00</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}},"typography":{"letterSpacing":"0.08em","textTransform":"uppercase"},"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"}},"fontSize":"small"} -->
<p class="has-text-color has-small-font-size" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:var(--wp--preset--spacing--20);letter-spacing:0.08em;text-transform:uppercase">Per month</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)"/>
<!-- /wp:separator -->

<!-- wp:list {"style":{"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)"}}} -->
<ul style="font-size:clamp(0.9375rem, 1vw, 1rem)" class="wp-block-list"><!-- wp:list-item -->
<li>A starter set of patterns</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Core-block markup</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>The free theme scaffold</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>One site</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"border":{"width":"1px","color":"currentColor"},"spacing":{"padding":{"top":"0.85rem","bottom":"0.85rem","left":"1.5rem","right":"1.5rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-border-color wp-element-button" style="border-color:currentColor;border-width:1px;color:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:0.85rem;padding-right:1.5rem;padding-bottom:0.85rem;padding-left:1.5rem">Choose Solo</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:group {"style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"border":{"width":"2px","color":"var(--wp--preset--color--role-rule, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 1.9vw, 2.25rem)","right":"clamp(1.25rem, 1.9vw, 2.25rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-text-color has-background has-link-color" style="border-color:var(--wp--preset--color--role-rule, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));border-width:2px;color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 1.9vw, 2.25rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 1.9vw, 2.25rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"textTransform":"uppercase","letterSpacing":"0.2em","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-small-font-size has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Recommended</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|40"}},"typography":{"textTransform":"uppercase","letterSpacing":"0.14em","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-small-font-size has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--40);font-weight:600;letter-spacing:0.14em;text-transform:uppercase">Studio</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"clamp(3.25rem, 5.4vw, 4.5rem)","lineHeight":"0.95","letterSpacing":"-0.05em","fontWeight":"700"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--30);font-size:clamp(3.25rem, 5.4vw, 4.5rem);font-weight:700;letter-spacing:-0.05em;line-height:0.95">£00</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|20"}},"typography":{"letterSpacing":"0.08em","textTransform":"uppercase"}},"fontSize":"small"} -->
<p class="has-small-font-size has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--20);letter-spacing:0.08em;text-transform:uppercase">Per month</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)"/>
<!-- /wp:separator -->

<!-- wp:list {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)"}}} -->
<ul style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:clamp(0.9375rem, 1vw, 1rem)" class="wp-block-list has-text-color"><!-- wp:list-item -->
<li>Every pattern in the catalogue</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>New releases while the plan is active</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Unlimited client sites</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>The free theme scaffold</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Setup questions answered first</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:button {"style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"0.85rem","bottom":"0.85rem","left":"1.5rem","right":"1.5rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:0.85rem;padding-right:1.5rem;padding-bottom:0.85rem;padding-left:1.5rem">Choose Studio</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"30%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:30%"><!-- wp:group {"style":{"border":{"width":"1px","color":"currentColor"},"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"clamp(1.25rem, 1.9vw, 2.25rem)","right":"clamp(1.25rem, 1.9vw, 2.25rem)"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color" style="border-color:currentColor;border-width:1px;padding-top:var(--wp--preset--spacing--50);padding-right:clamp(1.25rem, 1.9vw, 2.25rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(1.25rem, 1.9vw, 2.25rem)"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.14em","fontWeight":"600"},"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"}},"fontSize":"small"} -->
<p class="has-text-color has-small-font-size" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));font-weight:600;letter-spacing:0.14em;text-transform:uppercase">Agency</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"clamp(2.5rem, 4vw, 3.25rem)","lineHeight":"1","letterSpacing":"-0.04em","fontWeight":"700"}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);font-size:clamp(2.5rem, 4vw, 3.25rem);font-weight:700;letter-spacing:-0.04em;line-height:1">£000</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}},"typography":{"letterSpacing":"0.08em","textTransform":"uppercase"},"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"}},"fontSize":"small"} -->
<p class="has-text-color has-small-font-size" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:var(--wp--preset--spacing--20);letter-spacing:0.08em;text-transform:uppercase">Per month</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)"/>
<!-- /wp:separator -->

<!-- wp:list {"style":{"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)"}}} -->
<ul style="font-size:clamp(0.9375rem, 1vw, 1rem)" class="wp-block-list"><!-- wp:list-item -->
<li>Everything in Studio</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Use in client sites</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>A named contact</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Invoicing and purchase orders</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"border":{"width":"1px","color":"currentColor"},"spacing":{"padding":{"top":"0.85rem","bottom":"0.85rem","left":"1.5rem","right":"1.5rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-border-color wp-element-button" style="border-color:currentColor;border-width:1px;color:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:0.85rem;padding-right:1.5rem;padding-bottom:0.85rem;padding-left:1.5rem">Talk to us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Variation: Dual price cards
17,862 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"clamp(28px, 5vw, 80px)","bottom":"clamp(28px, 5vw, 80px)","left":"max(28px, calc((100vw - 1200px) / 2))","right":"max(28px, calc((100vw - 1200px) / 2))"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"default"}} -->
<div class="alignfull has-text-color has-background wp-block-group has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:clamp(28px, 5vw, 80px);padding-bottom:clamp(28px, 5vw, 80px);padding-left:max(28px, calc((100vw - 1200px) / 2));padding-right:max(28px, calc((100vw - 1200px) / 2))"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"grid","minimumColumnWidth":"16rem"}} -->
<div class="wp-block-group">
<!-- wp:group {"style":{"spacing":{"padding":{"right":"42px","bottom":"28px"},"blockGap":"28px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="padding-right:42px;padding-bottom:28px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"14px","fontWeight":"700","letterSpacing":"0.12em","lineHeight":"1.4"}}} -->
<p style="font-size:14px;font-weight:700;letter-spacing:0.12em;line-height:1.4">PLANS FOR YOUR NEXT CHAPTER</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"typography":{"fontSize":"clamp(2.5rem, calc(1.2813rem + 5vw), clamp(44px, 5vw, 64px))"}},"level":2} -->
<h2 class="wp-block-heading" style="font-size:clamp(2.5rem, calc(1.2813rem + 5vw), clamp(44px, 5vw, 64px))">A little room<br>to grow.</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p style="font-size:16px;line-height:1.55">Choose the space your team needs today. Make more room when the next good idea arrives.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group --><!-- wp:group {"style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"border":{"color":"var(--wp--preset--color--role-rule, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))","width":"1px"},"spacing":{"padding":{"top":"28px","bottom":"28px","left":"28px","right":"28px"},"blockGap":"14px"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}}} -->
<div class="wp-block-group has-border-color has-text-color has-background has-link-color" style="border-color:var(--wp--preset--color--role-rule, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));border-width:1px;color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:28px;padding-bottom:28px;padding-left:28px;padding-right:28px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"14px","fontWeight":"700","letterSpacing":"0.12em","lineHeight":"1.4"}}} -->
<p style="font-size:14px;font-weight:700;letter-spacing:0.12em;line-height:1.4">YOUR WORK, YOUR PACE</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"typography":{"fontSize":"22px"}},"level":3} -->
<h3 class="wp-block-heading" style="font-size:22px">Start</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"clamp(44px, 4.7vw, 60px)","letterSpacing":"-0.065em","lineHeight":"1"}}} -->
<p style="font-size:clamp(44px, 4.7vw, 60px);letter-spacing:-0.065em;line-height:1">$20</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"14px","fontWeight":"700","letterSpacing":"0.01em","lineHeight":"1.4"}}} -->
<p style="font-size:14px;font-weight:700;letter-spacing:0.01em;line-height:1.4">PER MONTH, BILLED MONTHLY</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"22px","lineHeight":"1.2"}}} -->
<p style="font-size:22px;line-height:1.2">$16 / month</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"14px","fontWeight":"700","letterSpacing":"0.12em","lineHeight":"1.4"}}} -->
<p style="font-size:14px;font-weight:700;letter-spacing:0.12em;line-height:1.4">BILLED YEARLY · SAVE 20%</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p style="font-size:16px;line-height:1.55">For a small team finding its rhythm.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"top":"18px","bottom":"18px","left":"24px","right":"24px"}},"typography":{"fontSize":"14px","lineHeight":"1.4"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-custom-font-size wp-element-button" style="padding-top:18px;padding-right:24px;padding-bottom:18px;padding-left:24px;font-size:14px;line-height:1.4" href="#contact">Choose Start ↗</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p style="font-size:16px;line-height:1.55">↳ Three active projects</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p style="font-size:16px;line-height:1.55">↳ Unlimited guests</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p style="font-size:16px;line-height:1.55">↳ Seven days of history</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
</div>
<!-- /wp:group -->

<!-- wp:group {"style":{"color":{"background":"var(--wp--preset--color--role-plate, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))","text":"var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"border":{"color":"currentColor","width":"1px","radius":"24px 24px 0 0"},"spacing":{"padding":{"top":"28px","bottom":"28px","left":"28px","right":"28px"},"blockGap":"14px"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}}} -->
<div class="wp-block-group has-border-color has-text-color has-background has-link-color" style="border-color:currentColor;border-width:1px;border-radius:24px 24px 0 0;color:var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)));background-color:var(--wp--preset--color--role-plate, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));padding-top:28px;padding-bottom:28px;padding-left:28px;padding-right:28px"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"typography":{"fontSize":"14px","fontWeight":"700","letterSpacing":"0.12em","lineHeight":"1.4"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)));font-size:14px;font-weight:700;letter-spacing:0.12em;line-height:1.4">MOST CHOSEN</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"color":{"text":"var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"typography":{"fontSize":"22px"}},"level":3} -->
<h3 class="has-text-color wp-block-heading" style="color:var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)));font-size:22px">Grow</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"typography":{"fontSize":"clamp(44px, 4.7vw, 60px)","letterSpacing":"-0.065em","lineHeight":"1"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)));font-size:clamp(44px, 4.7vw, 60px);letter-spacing:-0.065em;line-height:1">$50</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"typography":{"fontSize":"14px","fontWeight":"700","letterSpacing":"0.01em","lineHeight":"1.4"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)));font-size:14px;font-weight:700;letter-spacing:0.01em;line-height:1.4">PER MONTH, BILLED MONTHLY</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"typography":{"fontSize":"22px","lineHeight":"1.2"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)));font-size:22px;line-height:1.2">$40 / month</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"typography":{"fontSize":"14px","fontWeight":"700","letterSpacing":"0.12em","lineHeight":"1.4"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)));font-size:14px;font-weight:700;letter-spacing:0.12em;line-height:1.4">BILLED YEARLY · SAVE 20%</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)));font-size:16px;line-height:1.55">For a growing team bringing the work together.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","background":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"18px","bottom":"18px","left":"24px","right":"24px"}},"typography":{"fontSize":"14px","lineHeight":"1.4"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:18px;padding-right:24px;padding-bottom:18px;padding-left:24px;font-size:14px;line-height:1.4" href="#contact">Choose Grow ↗</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)));font-size:16px;line-height:1.55">↳ Unlimited projects</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)));font-size:16px;line-height:1.55">↳ Timeline and planning views</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-plate-text, var(--wp--preset--color--base, var(--wp--preset--color--white)));font-size:16px;line-height:1.55">↳ Ninety days of history</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
</div>
<!-- /wp:group -->

<!-- wp:group {"style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"border":{"color":"var(--wp--preset--color--role-rule, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))","width":"1px"},"spacing":{"padding":{"top":"28px","bottom":"28px","left":"28px","right":"28px"},"blockGap":"14px"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}}} -->
<div class="wp-block-group has-border-color has-text-color has-background has-link-color" style="border-color:var(--wp--preset--color--role-rule, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));border-width:1px;color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:28px;padding-bottom:28px;padding-left:28px;padding-right:28px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"14px","fontWeight":"700","letterSpacing":"0.12em","lineHeight":"1.4"}}} -->
<p style="font-size:14px;font-weight:700;letter-spacing:0.12em;line-height:1.4">YOUR WORK, YOUR PACE</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"typography":{"fontSize":"22px"}},"level":3} -->
<h3 class="wp-block-heading" style="font-size:22px">Studio</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"clamp(44px, 4.7vw, 60px)","letterSpacing":"-0.065em","lineHeight":"1"}}} -->
<p style="font-size:clamp(44px, 4.7vw, 60px);letter-spacing:-0.065em;line-height:1">$100</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"14px","fontWeight":"700","letterSpacing":"0.01em","lineHeight":"1.4"}}} -->
<p style="font-size:14px;font-weight:700;letter-spacing:0.01em;line-height:1.4">PER MONTH, BILLED MONTHLY</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"22px","lineHeight":"1.2"}}} -->
<p style="font-size:22px;line-height:1.2">$80 / month</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"14px","fontWeight":"700","letterSpacing":"0.12em","lineHeight":"1.4"}}} -->
<p style="font-size:14px;font-weight:700;letter-spacing:0.12em;line-height:1.4">BILLED YEARLY · SAVE 20%</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p style="font-size:16px;line-height:1.55">For teams with more people and moving parts.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"top":"18px","bottom":"18px","left":"24px","right":"24px"}},"typography":{"fontSize":"14px","lineHeight":"1.4"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-custom-font-size wp-element-button" style="padding-top:18px;padding-right:24px;padding-bottom:18px;padding-left:24px;font-size:14px;line-height:1.4" href="#contact">Choose Studio ↗</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p style="font-size:16px;line-height:1.55">↳ Advanced permissions</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p style="font-size:16px;line-height:1.55">↳ Priority support</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.55"}}} -->
<p style="font-size:16px;line-height:1.55">↳ Unlimited history</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Pricing

Explore all 16 Pricing patterns

Studio service menu rendered in Twenty Twenty-FiveShot in Twenty Twenty-FivePricingNo plugin needed

Studio service menu

Studio service menu: a sliding service menu becomes all offers shown.

PricingPreview pattern
Website care rendered in Twenty Twenty-FiveShot in Twenty Twenty-FivePricingNo plugin needed

Website care

Website care: service scopes beside prices, expandable plan scopes.

PricingPreview pattern
Rates day sheet rendered in Twenty Twenty-FiveShot in Twenty Twenty-FivePricingNo plugin needed

Rates day sheet

A freelancer’s rates as one printed rate card: a short introduction and a single booking button beside a card with a heavy masthead rule, three ruled rows each naming the rate, what it covers and what it includes, with the price set at display size in the right margin, and the terms (deposit, usage, travel, weather) as small print at the foot.

PricingPreview pattern