Pricing stack tiers, Pattern Paste Canonical: https://patternpaste.com/pattern/pricing-stack-tiers.html Interactive (https://patternpaste.com/interactive/) Stack (https://patternpaste.com/interactive/stack/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # Pricing stack tiers Four pricing cards built as plan sheets: a numbered header, a large price beside a compact feature ledger, and a ruled footer. The Studio plan lands last, with an inverted surface and the only plan button. Prices describe a fictional studio and are placeholders, not Pattern Paste prices. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the four plans as a plain column of fully designed cards. States no colour and no font of its own. Start here ## What you change first - The words and prices. Edit the ordinary core blocks inside each Card group. - The order and count. Duplicate, remove or reorder Card groups in List View. - The card surfaces. Preserve an opaque base or contrast ground on every Card group while the block’s plate is off. - The masthead and hand-off. Both are ordinary groups outside the pinned block. - Motion. The inspector provides the switch, deal, peek, depth, shrink, dim, overshoot, lean, width, minimum card height, gap, plate and counter. - Heading levels. The masthead is h2 and the card titles are h3. The signature moment ## Four plans dealt one over another, the recommended plan landing last and on top, so the reader arrives at the plan you want them to buy The sequence ends on a decision. Starter, Freelance and Agency establish the range; Studio arrives last and remains face up with the action. The largest price is encountered before the recommendation. A wide price column and a dense feature column make the plan understandable at a glance. Theme handoff ## What comes from where ### From your theme - Every typeface comes from the theme. - Surfaces and their ink use paired base and contrast chains with core fallbacks. Inverted cards reverse the pair. Every heading states its own colour. - The masthead follows the x-large type rung and its introduction follows medium. Plan names follow the large rung. - Outer vertical spacing uses core spacing presets. The hand-off button follows the theme’s button styling. The button on the inverted card explicitly uses base and contrast so its label remains legible. ### Set by this pattern - Display type. - The card surface. - The layout. - The pile. - Contrast. 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 Four pricing cards built as plan sheets: a numbered header, a large price beside a compact feature ledger, and a ruled footer. The Studio plan lands last, with an inverted surface and the only plan button. Prices describe a fictional studio and are placeholders, not Pattern Paste prices. ### The signature moment: Four plans dealt one over another, the recommended plan landing last and on top, so the reader arrives at the plan you want them to buy The sequence ends on a decision. Starter, Freelance and Agency establish the range; Studio arrives last and remains face up with the action. The largest price is encountered before the recommendation. A wide price column and a dense feature column make the plan understandable at a glance. ### Why this is not process-stack-steps Pricing uses four plan sheets, a slower deal and a single inverted recommendation. Its dominant mark is the price, with a compact feature ledger alongside. The process has six alternating surfaces and a large phase number. Make it yoursVariations and the edits to make first ### What you change first - The words and prices. Edit the ordinary core blocks inside each Card group. Replace the fictional figures, billing terms and inclusions. Keep the copy concise enough to fit a phone. - The order and count. Duplicate, remove or reorder Card groups in List View. Keep the recommendation last and update its button destination. The block derives the live counter and scroll length from the actual card count. - The card surfaces. Preserve an opaque base or contrast ground on every Card group while the block’s plate is off. Edit the paired ink at the same time. - The masthead and hand-off. Both are ordinary groups outside the pinned block. Replace the hand-off link destination. - Motion. The inspector provides the switch, deal, peek, depth, shrink, dim, overshoot, lean, width, minimum card height, gap, plate and counter. A larger card or deeper pile needs more room in the viewport. - Heading levels. The masthead is h2 and the card titles are h3. Adjust these to the surrounding page’s outline. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Every typeface comes from the theme. - Surfaces and their ink use paired base and contrast chains with core fallbacks. Inverted cards reverse the pair. Every heading states its own colour. - The masthead follows the x-large type rung and its introduction follows medium. Plan names follow the large rung. - Outer vertical spacing uses core spacing presets. The hand-off button follows the theme’s button styling. The button on the inverted card explicitly uses base and contrast so its label remains legible. ### What it decides for itself - Display type. Prices use a 3.5rem to 6.5rem clamp, tight tracking and a line-height of 1. These proportions stay independent of the theme ladder. Compact card copy uses a 1rem to 1.125rem clamp, line-height 1.55, because it lives in a narrow column. Footers and feature rows have a 15px floor. Tracked header labels are incidental apparatus. - The card surface. The block’s plate is off. Every Card group supplies its own opaque ground, matching ink, one-pixel currentColor border, one-rem corners and fluid horizontal padding. The design therefore survives plugin deactivation. It needs no pattern-specific CSS. - The layout. Core columns divide the price from the inclusions and stack below WordPress’s mobile breakpoint. Header and footer rows wrap. Cards use a vertical flex layout so the footer stays at the foot of the full surface. - The pile. A 1080px deck, three moving levels, 28px peeks, three-percent shrink and ten-percent dim leave clear card edges. The velocity lean is four degrees. Each plan takes 110 percent of a screen to arrive. The card group’s 380px minimum is a floor; content may make it taller. - Contrast. Ordinary copy must reach 4.5:1 in the rendered themes; large display type may use the 3:1 floor. These are measured in the verification loop. Technical notesBlock mechanics, responsive behaviour and constraints ### What needs the plugin Install the companion plugin, included with access, before pasting. The pattern embeds patternpaste/stack and an absent block registration shows a missing-block placeholder in the editor. With motion enabled the frame pins while the cards are dealt, then releases on the final card. Scrolling back reverses the sequence. The counter follows the current card. Nothing moves while the page is still. With motion off, reduced motion requested, or JavaScript unavailable, all four cards form a plain column with their complete content visible. With the plugin deactivated, the same core groups retain their backgrounds, borders, padding and composition. The plugin’s deck width and inter-card layout go with the wrapper. ### What is not proved The theme matrix and responsive checks cover the supported authoring themes, not every possible type scale or amount of replacement copy. Test a long translation and your own theme before publishing. The effect does not measure whether a visitor understands a process or prefers a particular plan. 45KB of core-block markup, 8 blocks (button, buttons, column, columns, group, heading, paragraph, patternpaste/stack), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Use it for - Subscription and membership pricing sections - Agency and studio retainer tiers - Software plan pages with a recommended plan - Course and community membership levels - Service packages argued one at a time #### Pair with FAQ FAQ bento An asymmetric bento layout pairing a large featured lead card on the left with four compact question tiles on the right. The featured card holds the core question with an expanded answer, key feature takeaways and an action link; the right column packs four bordered cards answering quick practical concerns. States no colour and no font of its own. (https://patternpaste.com/pattern/faq-bento.html)Tables Compare matrix A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-matrix.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. How to install it (https://patternpaste.com/docs/install-pattern-paste/). Requires a block theme on WordPress 6.7 to 7.0. 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. How we test patterns (https://patternpaste.com/how-we-test/) #### What's inside Blocks button, buttons, column, columns, group, heading, paragraph, patternpaste/stack Core only NO Chains 126, deepest 2 rungs currentColor yes color base, black, contrast, white spacing 20, 40, 70 font-size large, medium, x-large Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Pricing (https://patternpaste.com/patterns/pricing/)Also in Compare (https://patternpaste.com/patterns/compare/) Shot in Twenty Twenty-Five Gallery Gallery Editorial Needs plugin ### Case stack panels Five case-study panels on a dark band: a short masthead, then five prints dealt over one another as you scroll, each one a photograph in a wide cinematic crop with its client, its year and one line of outcome on the plate beneath it. 7 blocks Open preview (https://patternpaste.com/pattern/case-stack-panels.html) Shot in Twenty Twenty-Five How it works How it works Needs plugin ### Process stack steps Six process cards with oversized phase numbers, short editorial headlines and a ruled deliverables footer. 8 blocks Open preview (https://patternpaste.com/pattern/process-stack-steps.html) Shot in Twenty Twenty-Five Gallery Gallery Needs plugin ### Destination reel A full-screen-height landscape reel fills the left beside an editorial heading and numbered travel index. 9 blocks Open preview (https://patternpaste.com/pattern/gallery-warp-reel-destinations.html)