With Usage Curve
A plan card beside an SVG curve of the unit price flattening across three labeled volume tiers.
A plan card beside an SVG curve of the unit price flattening across three labeled volume tiers.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
With Usage Curve is a pricing section for usage based plans. The left half is a bordered plan card: a headline, the unit price with its denominator spelled out, a four item feature list, and a full width CTA. The right half explains the economics: a short heading and line above an SVG curve of price per contact flattening as volume grows, with three dotted markers labeling the tiers along the way and quiet axis labels in the corners.
The feature list is a plain array, and the curve is one bezier path with the markers in a small inline array of coordinates and labels, so retuning tiers means editing three labels and positions. Everything is tokens and SVG text, no images, and the axis labels keep the chart honest without pretending to be a real price calculator.
Reach for this block when your pricing scales with usage and the fear you fight is what happens to my bill when I grow. The flattening curve answers it visually, something per-seat-calculator answers interactively and simple-rate-table answers in rows. Use this one on marketing pages where mood matters more than math, and the calculator where buyers arrive ready to compute.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is contact based pricing with automatic volume breaks. Other usage stories:
Tip: label the markers with volumes your real customers recognize, the curve persuades when readers can place themselves on it.