Home / Blocks / Pricing card

Pricing card

A single tier in a pricing comparison. Three of them lined up form a pricing row; the middle one is usually featured. Used on marketing surfaces and the in-product Upgrade flow.

Stable .pcard 3 tiers · featured variant

Three-tier row

Canonical layout — Starter / Branch / Group. The middle tier is featured to anchor the decision.

Starter
USD29/ month

For a single tuck-shop or pop-up till. Up to 2 staff.

  • 1 branch · 2 tills
  • Offline-first POS
  • EcoCash, OneMoney, cash
  • Email support
  • Multi-branch reporting
  • NMB / CBZ Bank sync
Group
USD249/ month

For multi-branch groups like Mukamba. Unlimited everything.

  • Unlimited branches
  • Consolidated reporting (USD & ZWG)
  • SSO + role-based access
  • Custom integrations
  • Dedicated account manager
  • 99.9 % SLA
Pricing row · 3 tiers · Branch featured .pcard · .pcard.featured

Single card

In-product upgrade prompt — one card, no comparison.

In-product upsell card

Parts

PropertyValueNotes
radius14 pxLarger than data cards
padding24 px16 px gap between sections
tier label600 14 px uppercaseBrand colour when featured
price700 36 pxCurrency prefix in mono
featuredBrand border + 4 px brand-soft glowPlus ribbon
checklist16 px round bullet · success-bgDisabled rows greyed

Do & don't

Do

Feature exactly one tier — usually the middle. Anchoring helps the operator decide.

Don't

Feature two tiers at once. Now they're indistinguishable, defeating the point.

Do

List what's not included as greyed-out rows. Operators want to see the difference at a glance.

Don't

Hide the price behind "Contact us" except on the largest enterprise tier.

Related

For full pricing pages with comparison table and FAQ, see Pricing page.