Pricing 04

About this block

Pricing 04 is a three-column pricing section where the popular plan stands out with a dark radial-gradient background. A pill-shaped billing toggle with a green dot indicator switches between monthly and yearly pricing. Each card shows a large price display with a dollar-sign prefix, a short description, a CTA button, and a feature list with checkmarks. The popular card uses white-tinted button and text styles to stay readable on the dark background.

When to use it

• SaaS products with a clear recommended plan that should draw the user's eye immediately
• Pricing pages targeting creators or indie makers where a visually bold middle tier drives upgrades
• Products that offer a yearly discount and want to hint at it with a subtle green badge on the yearly tab
• Situations where you want each plan to feel distinct without using colored borders or badges

Notes

Keep plan descriptions to one or two lines so all three cards stay the same height. The dark gradient on the popular card is purely CSS — no image assets required.