Modern
A contemporary pricing section with bold cards, soft shadows, and accent gradients. Use it to give a polished, current feel to a product or SaaS page.
A contemporary pricing section with bold cards, soft shadows, and accent gradients. Use it to give a polished, current feel to a product or SaaS page.
Search blocks by description or jump to a page.
Modern Pricing Section opens with a centered heading and a one-line subheading, then drops into a three-column card grid. Each card carries a large SVG icon, plan name, price (or "Custom" for the top tier), a short description, and a checklist of features confirmed with check icons. The middle card is visually promoted: it receives a border accent, a raised shadow, and a "Most Popular" badge pinned above it. Each card closes with a full-width button that routes to signup or the contact page depending on the plan. Below the grid a small line invites buyers to reach out for a custom arrangement.
The heading copy, plan names, prices, feature lists, and button labels are all plain data you can swap in minutes. The number of features per plan can differ across cards without breaking the layout. You can add or remove plans, move the popular highlight to a different card, or drop the bottom contact line if you handle enterprise enquiries elsewhere.
Reach for this block on a dedicated pricing page for an online education platform, course marketplace, or learning tool where three tiers cover solo learners, growing teams, and institutions. The prominent card highlight makes the recommended plan obvious without hiding the alternatives, which suits situations where buyers comparison shop before committing. It works better than a flat feature grid when you want visual warmth rather than a dense table, and better than a minimalist single-price layout when you genuinely have multiple tiers to show.
A natural flow around it on a Marketing (Legacy) page:
Before
After
All three cards share the same structure, so the same edits apply everywhere at once. A few things worth tailoring:
popular: true flag to
whichever plan you want highlighted; the border, shadow, and badge
all follow it.Tip: keep each feature list to five to seven items so all three cards stay roughly the same height and the grid reads as a coherent row.