Ledger
Three plan cards side by side, with the recommended tier lifted by a coloured border, a deeper shadow and a badge.
Pricing section templates
A pricing section has to do two jobs at once: state the cost honestly, and make the recommended option obvious. Most visitors are not comparing every line — they are looking for permission to pick the middle one.
10 pricing section layouts
Each one below is a live preview rendering in your current design language, not a screenshot. Open any of them to see it full-width, switch the business type to read it with your kind of content, or add it to a page.
Tally
A full feature-comparison table: features down the first column, plans across the top, with the popular column tinted.
Vault
A single all-inclusive plan on one wide card — the price and call to action on the left, everything included on the right.
Podium
Three plans on a winner's podium, bottom-aligned so the recommended tier stands physically taller than the others.
Carte
A menu-style price list rather than a card grid — a narrow, hairline-divided run of rows, at home on a service business.
Stack
Plans as full-width horizontal bands instead of vertical cards, each row carrying its name, price and call to action.
Ascent
Tiers as an ascending staircase, each plan sitting on a riser that grows taller as the price does.
Aside
An editorial pitch beside the plans: a sticky heading holds its place on the left while the tiers scroll past.
Sheet
Plans fused into one solid panel rather than separate cards, divided into three columns inside a single frame.
Cadence
Three plan cards above a monthly / annual billing toggle that switches every price in place.
How to choose a pricing section
Pick by how many plans you have and how similar they are. Three comparable plans belong in a card row with one emphasised. A single plan needs a layout built for one, not a lonely card in a three-column grid. If plans differ across many small details, a comparison table is the only honest way to show it. Service businesses with per-item prices are usually better served by a menu-style list than by cards.
At a glance
- Layouts
- 10 distinct pricing sections
- Styles covered
- cards, emphasis, compact, table, compare, single-plan, feature-list, podium
- Styling
- Your color, typography, spacing, radius and shadow tokens
- Export
- HTML, CSS, JSON, or an AI instruction package
Pricing section FAQ
How many pricing tiers should I show?
Three is the common choice because it gives a cheap option, a recommended option and a premium option without overwhelming anyone. Two works well when the difference is genuinely binary. More than four almost always needs a comparison table instead of cards.
Should I highlight a recommended plan?
Yes. An unmarked set of plans pushes the decision entirely onto the visitor, and the common result is that they decide later, which means never. Emphasising one plan is guidance, not pressure — as long as it is genuinely the right choice for most people.
Do I need a comparison table?
Only when plans differ in ways cards cannot summarise. Cards handle "more of the same" pricing well. A table earns its complexity when buyers are checking for specific capabilities before committing.