Three tiers, one highlighted. Toggle between monthly and annual — prices animate and a "Save" badge appears.
A structured comparison of your product's different pricing tiers. Almost always 3 columns: a free/starter plan, a paid pro plan (the one you want most people to buy), and an enterprise plan. The pro plan is visually highlighted — larger, with a colored border, an elevated position, and a "Most Popular" badge — to guide users toward it.
Three-column layout. Each column is a card with: plan name, large price, billing period, 1-line description, a checklist of features, and a CTA button. The pro card gets special visual treatment: a colored border (2px), a badge at the top, and sometimes a slight scale-up (transform: scale(1.05)) to make it literally bigger than the others.
Click the toggle to swap monthly/annual. The "Save 25%" pill appears when annual is selected.
Build a 3-tier pricing table with monthly/annual toggle. Free tier: white card, $0/month, 5 features, outlined button. Pro tier (highlighted): colored border (#2563EB, 2px), transform:scale(1.04), 'Most Popular' badge in blue at top, $29/month (annual) / $39/month (monthly), 12 features, filled CTA button. Enterprise: white card, 'Custom pricing', 6 features, outlined button. All cards have: plan name (bold), price (48px), feature checklist with checkmark icons (green checks, gray crosses for excluded). The monthly/annual toggle animates the prices changing and shows 'Save 25%' badge next to the annual option.