Search blocks by description or jump to a page.
A three tier pricing section with a featured plan, per card annual billing toggles, icon feature lists, and an enterprise banner.
The source for every Modern SaaS block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Three Tier is the full pricing story on one screen. A centered header sits above three plans, Basic, Pro, and Scale, with the Pro plan inverted onto a solid panel so the recommended tier reads first. Each card stacks a name, a one line audience, a price, and an icon feature list, and a full width enterprise banner rounds the section off for the deals that never fit a card.
Every card carries its own annual billing toggle, so a visitor can flip a single plan between monthly and annual without touching the others, while the Scale plan is marked annual only. The section holds its shape in light and dark mode with no external images.
Reach for this block as the dedicated pricing moment on a landing page or a standalone pricing page, once a visitor understands the product and is weighing plans. For a creative agency or studio it works well when positioned after a portfolio or process section, giving potential clients a clear handoff from "here is what we do" to "here is what it costs." The inverted Pro card does the steering, so lead with the tier you most want people to pick.
A natural flow around it on a Modern SaaS page:
Before
After
The obvious fit is three self serve tiers with a featured middle plan and an enterprise handoff below. A few other ways to use the frame:
Tip: keep each feature to a short phrase with a single icon so the three cards stay scannable side by side, even when one plan lists more than the others.