Pricing comparison
Three responsive pricing cards with a highlighted recommendation and scannable feature lists.
When this template fits
Use this comparison when buyers can choose among three plans distinguished by collaboration or usage limits. The highlighted middle plan supports a genuine recommendation, not a disguised default or a plan that is impossible to deselect.
How the layout works
Each card follows the same sequence: plan name, price, included capabilities, then action. Equal content order makes scanning easier, while the recommended card uses border weight and position rather than color alone to communicate emphasis.
What to customize
Replace sample limits with measurable entitlements and state the billing period beside every price. Keep feature wording parallel across plans, link to a detailed comparison, and explain taxes, trials, cancellation, and overages before checkout.
Review before publishing
Confirm the recommendation reflects a real customer segment, every button names its plan, and the cards become a sensible vertical sequence on mobile. Avoid fake scarcity, preselected paid upgrades, or features that exist only as future promises.
Keep building with context
Compare a related pattern or read a practical guide before adapting this example in the Playground.