Every way to ask for
the sale.
14 finished pricing sections: tiers, calculators, comparison tables, usage meters. Every control is real, every surface comes from tokens, and each one ships as a single file.
- Blocks
- 14
- Presets
- 8
- Breakpoints
- 3
- Licence
- Pro
Four columns
Four plans separated by rules instead of cards, with the featured one marked by its surface. Closes with a three-up band of reassurances.
Cost calculator
A rate card, live inputs and a running summary. The buyer builds their own quote before they ever contact sales.
Aligned bands
Columns built from bands that line up across the whole row, so nothing drifts as plans grow. Billing and add-on switches both move the price.
Hero grid
A pricing hero that carries the page: grid and light-streak backdrop, a two-tone headline, a real period switch, and a middle card lifted by a light seam.
Volume meter
A tick ruler with a draggable handle sets the volume, and three rule-divided columns price it live. Built for usage-based products.
Monochrome columns
The card holds only the header; the feature list runs down the page under it, ruled row by row. Quiet, editorial, and easy to extend.
Inverted twin
Two plans, same anatomy, one on an inverted surface. The choice reads instantly in either theme without colour tricks.
Package card
A card inside a card: three surface steps, a circular icon chip, and an inner panel that holds the feature list above a full-width pill button.
Shader wash
The same card twice: one carries a brand-derived shader wash and a dark call to action, the other stays plain. Contrast without a second layout.
Aurora column
A gradient-lit middle column for launches, with an animated billing switch and a saving percentage computed from the prices rather than typed in.
Featured plan with promo drawer
One plan carries the emphasis, and a discount code slides out from under it on hover. The code is copyable, so a campaign needs no second page.
Comparison matrix
A real feature table for long plan lists: grouped rows, plan headers that stay put while you scroll, and its own scroll container so the page never breaks.
Usage estimate
Buyers stop guessing. They drag their monthly volume and every plan recalculates, with the cheapest total marked for them.
Tiers
The classic three-tier table, done properly: a monthly to annual switch that really moves the numbers, and the per-transaction rate printed under every price.