About this block
A pricing section with 3 plan cards side by side, each with a name, short pitch, monthly price, feature list and button. The middle plan stands out with a heavier border, which steers people toward it. It's the classic layout for subscriptions, services and memberships.
When to use it
- Software or subscription products with 3 plans.
- Service businesses selling packages, like basic, standard and premium.
- Memberships, classes or coaching with different levels.
- Any time you want people to compare options at a glance.
What's inside
- A centred eyebrow, h2 heading and intro paragraph.
- 3 cards, each with an h3 plan name, a one-line pitch, a large price with "/month" and a divider.
- 5 features per card, each with a check icon. Key words in each line are bold.
- A full-width primary button at the bottom of each card. Buttons line up even when the text above them differs in length.
- The middle card has a primary-coloured border and ring. Cards stack on phones and small tablets and sit 3 across from 768px.
How to customize it
- Point each button at its signup or checkout page, or at your contact page for the top plan.
- Order features the same way in every card so people can compare them line by line.
- Move the highlight to the plan you want most people to choose, by moving the border and ring classes to that card.
- Change "/month" to "/year", "/session" or "one-off" to match how you charge.
Questions
- Why highlight the middle plan?
- People tend to pick the middle option when it's marked as the recommended one. It also makes the cheapest plan look like a starting point rather than the default.
- How many features should each plan list?
- 4 to 6 works well. List what's different between plans and leave out things every plan includes, or mention those once above the cards.
- Can I show monthly and yearly prices?
- This section shows one price per plan. Put the yearly price in the pitch line, or duplicate the section for a yearly version and link between them.