Skip to main content

Pricing

12 templates in this category. Each page has the screenshots, the structure, what to change and the CSS variables.

  • Pricing · 3 plans — A centered intro and three plan cards with price, features and a button; the middle plan is featured.
  • Pricing · Cards and comparison — Three plan cards and, below, «Compare all features»: an accordion with one feature group per item, each a table whose columns line up with the plan cards.
  • Pricing · Compare table — A real table: plans stay pinned at the top while you scroll the features; on phones it regroups by plan.
  • Pricing · Hours calculator — A centered card with a slider for monthly hours and four price tiers charged step by step: the total and the average price per hour update as you move it.
  • Pricing · Monthly or yearly — Three plan cards with a Monthly / Yearly switch that swaps every price with a soft fade; the middle plan is featured.
  • Pricing · Plan and add-ons — One plan card and a form of optional extras: tick the add-ons you need, the monthly total adds them up and the form sends the request.
  • Pricing · Plans — Three plan cards with price, features, a note and a button; the middle plan is featured.
  • Pricing · Price list — Services grouped by category, each a list with the name and duration, a dotted line and the price.
  • Pricing · Rows — Plans as rows of a list: name and text, three key features, and the price with its button.
  • Pricing · Single plan — One large plan card: name, description, a price panel, a two-column list of what is included, the main button and a reassurance line.
  • Pricing · Team calculator — An intro next to a plan card with a team-size slider: the price tier, the price per person and the total update as you move it.
  • Pricing · Usage tiers — Usage-based pricing as a table of volume tiers, with the price per 1,000 requests and who each tier suits, and a worked example under it.