Fig. 39 / Pricing Table
Web UI Patterns
Pricing Table
EXPLAINED SIMPLY:Plan cards built for side-by-side comparison.
A pricing table is the row of plan cards that lets a visitor compare tiers, prices, and included features in one view.
The cards need a shared structure so differences line up. Plan names occupy the same row, prices use the same billing period, and checklists use matching language. A pricing table works when your eye can compare down a column without translating each card first.
Most tables emphasize one plan with a border, a raised card, or a Most Popular label. That nudge is useful when it reflects the right fit for most customers. It becomes slippery when the highlighted plan hides a longer commitment or quietly changes from monthly to annual pricing.
You'll hear pricing tiers, pricing cards, plan comparison, comparison table, feature matrix, and pricing grid. A paywall can contain a compact pricing table inside an app, but the table itself is the comparison tool, not the wall around the product.
Put the billing period next to the number, not in the footnote. The same goes for trials, limits, and setup fees. A visitor should understand the expensive difference before pressing the bright button.