Plans With Meters

About this block

Plans With Meters is a three tier pricing section where capacity is drawn, not listed. Each plan card carries its name, price, a one line blurb, three quota meters, and a CTA. The meters share labels across cards, contacts, emails per month, and seats, and their fill widths are proportional to the tier, so a glance across the row shows exactly what growing from Starter to Scale buys. The featured plan gets a stronger border, a badge, full strength meter color, and the solid button.

The plans are one array holding everything including meter widths, so retuning tiers is data editing. Keep widths honest relative to each other within a label, the visual comparison is the entire point of the block. The heading copy works hard here too: same features everywhere, only capacity changes.

When to use

Reach for this block when your tiers differ by quota rather than by features. It kills the wall of identical checkmarks that makes free-vs-pro feel padded when features do not differ, and it reads faster than feature-matrix-compact. If tiers differ by capability rather than volume, the matrix or annual-toggle-two-tier tell that story better.

A natural flow around it on a Marketing Pro page:

Before

• Stats so readers can place their own volumes before meeting the meters

After

• FAQs for overage and upgrade questions the meters raise
• CTAs for the readers who scrolled past the cards

What you can display

One strong use is volume tiers for a campaign platform. Other metered products:

• API plans. Requests, projects, and team members per tier for a developer product.
• Storage tiers. Space, bandwidth, and versions retained for a file or asset platform.
• Booking plans. Calendars, bookings per month, and staff seats for scheduling software.

Tip: let the top tier hit one hundred percent on every meter, full bars say this is the plan without ceilings.