Start here
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 channel's width, if your saving line is long.
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.
Theme handoff
What comes from where
From your theme
- Every colour.
- The typeface
- Button shape, link colour and list markers
- The spacing scale
Set by this pattern
- The proportions
- The symmetry.
- The type ramp
- The feature lists state their own size
- The footnote is held to 26rem
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
Two plans, head to head, fifty-fifty, with the saving stated in the gap between them. It is the two-plan section read across: pricing-ledger sets the same argument down the page as two ruled entries, 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.
Make it yoursVariations and the edits to make first
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.
Theme behaviourInheritance, fixed decisions and contrast
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 does not stay valid across editor versions. - 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.
Display type
Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(2.75rem, 4.6vw, 4rem)
Technical notesBlock mechanics, responsive behaviour and constraints
What happens on a phone
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 pricing-ledger, which is built that way: the plans become two ruled entries stacked down the page with the figure and the action in the right-hand column, and the saving sits between the hairlines that separate them.
Questions
Pricing duo: common questions
Does Pricing duo 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 duo match my theme?
Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted.
Is Pricing duo free?
Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit.
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.
11,521 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":"680px","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"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-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">Pricing</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"var(--wp--preset--font-size--x-large, clamp(2rem, 3.4vw, 2.75rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--x-large, clamp(2rem, 3.4vw, 2.75rem))">Month by month, or a year at a time.</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}},"fontSize":"medium"} -->
<p class="has-medium-font-size" style="margin-top:var(--wp--preset--spacing--30)">Two ways to pay for exactly the same thing. The only difference between these two columns is what it costs and how often, and that difference is written between them.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"0px"},"margin":{"top":"var:preset|spacing|70"}}}} -->
<div class="wp-block-columns" style="margin-top:var(--wp--preset--spacing--70)"><!-- wp:column {"width":"46%","style":{"spacing":{"padding":{"right":"clamp(1.25rem, 2.6vw, 2.75rem)"}}}} -->
<div class="wp-block-column" style="padding-right:clamp(1.25rem, 2.6vw, 2.75rem);flex-basis:46%"><!-- 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">Monthly</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"clamp(2.75rem, 4.6vw, 4rem)","lineHeight":"0.95","letterSpacing":"-0.05em","fontWeight":"700"}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);font-size:clamp(2.75rem, 4.6vw, 4rem);font-weight:700;letter-spacing:-0.05em;line-height:0.95">£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>Every pattern in the catalogue</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Every page template</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>The companion plugin</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Cancel at the end of any month</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">Start monthly</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"8%","style":{"border":{"right":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|20","left":"0.4rem","right":"0.4rem"}}}} -->
<div class="wp-block-column" style="border-right-color:currentColor;border-right-style:solid;border-right-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--20);padding-right:0.4rem;padding-left:0.4rem;flex-basis:8%"><!-- wp:paragraph {"align":"center","style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.12em","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.12em;text-transform:uppercase">Save 00%</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"46%","style":{"spacing":{"padding":{"left":"clamp(1.25rem, 2.6vw, 2.75rem)"}}}} -->
<div class="wp-block-column" style="padding-left:clamp(1.25rem, 2.6vw, 2.75rem);flex-basis:46%"><!-- 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">Yearly</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"clamp(2.75rem, 4.6vw, 4rem)","lineHeight":"0.95","letterSpacing":"-0.05em","fontWeight":"700"}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);font-size:clamp(2.75rem, 4.6vw, 4rem);font-weight:700;letter-spacing:-0.05em;line-height:0.95">£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 year</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>Every pattern in the catalogue</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Every page template</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>The companion plugin</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Two months not paid for</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">Start yearly</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"26rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"style":{"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p style="font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">Every figure here is a placeholder, including the saving. Prices exclude whatever tax you have to add.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"full","style":{"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-link-color" style="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":"680px","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.16em","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-weight:600;letter-spacing:0.16em;text-transform:uppercase">Pricing</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"var(--wp--preset--font-size--x-large, clamp(2rem, 3.4vw, 2.75rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--x-large, clamp(2rem, 3.4vw, 2.75rem))">Month by month, or a year at a time.</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}},"fontSize":"medium"} -->
<p class="has-medium-font-size" style="margin-top:var(--wp--preset--spacing--30)">Two ways to pay for exactly the same thing. The only difference between these two columns is what it costs and how often, and that difference is written between them.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"0px"},"margin":{"top":"var:preset|spacing|70"}}}} -->
<div class="wp-block-columns" style="margin-top:var(--wp--preset--spacing--70)"><!-- wp:column {"width":"46%","style":{"spacing":{"padding":{"right":"clamp(1.25rem, 2.6vw, 2.75rem)"}}}} -->
<div class="wp-block-column" style="padding-right:clamp(1.25rem, 2.6vw, 2.75rem);flex-basis:46%"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.14em","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-weight:600;letter-spacing:0.14em;text-transform:uppercase">Monthly</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"clamp(2.75rem, 4.6vw, 4rem)","lineHeight":"0.95","letterSpacing":"-0.05em","fontWeight":"700"}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);font-size:clamp(2.75rem, 4.6vw, 4rem);font-weight:700;letter-spacing:-0.05em;line-height:0.95">£00</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}},"typography":{"letterSpacing":"0.08em","textTransform":"uppercase"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="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>Every pattern in the catalogue</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Every page template</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>The companion plugin</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Cancel at the end of any month</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":"currentColor"},"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:currentColor;background-color:transparent;padding-top:0.85rem;padding-right:1.5rem;padding-bottom:0.85rem;padding-left:1.5rem">Start monthly</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"8%","style":{"border":{"right":{"color":"currentColor","style":"solid","width":"1px"},"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|20","left":"0.4rem","right":"0.4rem"}}}} -->
<div class="wp-block-column" style="border-right-color:currentColor;border-right-style:solid;border-right-width:1px;border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-top:var(--wp--preset--spacing--20);padding-right:0.4rem;padding-left:0.4rem;flex-basis:8%"><!-- wp:paragraph {"align":"center","style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.12em","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size" style="font-weight:600;letter-spacing:0.12em;text-transform:uppercase">Save 00%</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"46%","style":{"spacing":{"padding":{"left":"clamp(1.25rem, 2.6vw, 2.75rem)"}}}} -->
<div class="wp-block-column" style="padding-left:clamp(1.25rem, 2.6vw, 2.75rem);flex-basis:46%"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.14em","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-weight:600;letter-spacing:0.14em;text-transform:uppercase">Yearly</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"clamp(2.75rem, 4.6vw, 4rem)","lineHeight":"0.95","letterSpacing":"-0.05em","fontWeight":"700"}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);font-size:clamp(2.75rem, 4.6vw, 4rem);font-weight:700;letter-spacing:-0.05em;line-height:0.95">£000</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}},"typography":{"letterSpacing":"0.08em","textTransform":"uppercase"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="margin-top:var(--wp--preset--spacing--20);letter-spacing:0.08em;text-transform:uppercase">Per year</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>Every pattern in the catalogue</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Every page template</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>The companion plugin</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Two months not paid for</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":"currentColor"},"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:currentColor;background-color:transparent;padding-top:0.85rem;padding-right:1.5rem;padding-bottom:0.85rem;padding-left:1.5rem">Start yearly</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"26rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"style":{"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p style="font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">Every figure here is a placeholder, including the saving. Prices exclude whatever tax you have to add.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
