6 Pure CSS2 with JSPublished 2026-10-04Free · no sign-up
Eight ways to present prices: three plan cards with a highlighted favourite, a monthly and yearly switch, a feature comparison table, a single premium card, plan rows for settings pages, a usage-based calculator, a minimal two-plan layout and plans with an enterprise contact strip.
The classic three-plan layout with the middle plan raised and labelled Most popular. Features are real lists, prices use tabular numbers so they line up, and the cards stack into one column on narrow screens without any media query thanks to auto-fit.
Two plans with a Monthly and Yearly switch that updates every price. Prices are stored in data attributes, a few lines of JavaScript swap them, and the yearly saving is spelled out in words so the discount is clear without relying on a strike-through.
A real HTML table comparing three plans feature by feature. Column and row headers use th with scope so screen readers announce which plan and feature each cell belongs to, and included features show a tick with hidden text that says Included.
A single premium plan card for dark landing pages, with a gradient border made from a background on a wrapper and a soft glow beneath. The price, a short promise and the call to action are kept to a tight vertical rhythm.
View code
<div class="glowcard">
<article>
<p class="nm">Lifetime access</p>
<p class="pc">$249 <span>one payment</span></p>
<p class="ds">Every template we release, now and later, for one store.</p>
<ul><li>All 120+ templates</li><li>Future updates included</li><li>Commercial licence</li></ul>
<a href="#">Get lifetime access</a>
</article>
</div>
Plans laid out as wide rows instead of cards, which works well inside account settings when someone is changing plan. The current plan is marked with a badge and a disabled button, and the rows collapse into stacked blocks on phones.
View code
<ul class="rows">
<li><div><h3>Hobby <span class="cur">Current plan</span></h3><p>Personal projects and testing.</p></div><p class="pp">Free</p><button disabled>Selected</button></li>
<li><div><h3>Pro</h3><p>For freelancers with paying clients.</p></div><p class="pp">$18/mo</p><button>Upgrade</button></li>
<li><div><h3>Agency</h3><p>Client workspaces and white-label reports.</p></div><p class="pp">$64/mo</p><button>Upgrade</button></li>
</ul>
Pricing that depends on volume: drag the slider and the monthly cost updates live from a simple tiered formula. The result is an output element linked to the range input, which screen readers treat as a live calculation.
View code
<form class="calc" oninput="o.value = price(+n.value)">
<label for="n">Orders per month: <b id="nv">1,000</b></label>
<input id="n" name="n" type="range" min="100" max="10000" step="100" value="1000">
<p>Estimated cost <output name="o" for="n">$40</output><span>/month</span></p>
<small>$0.04 per order up to 2,000, then $0.025 per order.</small>
</form>
Two plans separated by a single vertical rule, with no card boxes at all. Typography does the work: a large price, a one-line summary and a text-style link for the call to action. Useful for portfolio and personal service pages.
View code
<div class="mp">
<section><h3>One-off</h3><p class="mpp">$450</p><p>A single landing page, designed and built in a week.</p><a href="#">Book a slot →</a></section>
<section><h3>Monthly</h3><p class="mpp">$1,200</p><p>Ongoing design and development, up to 30 hours.</p><a href="#">Start a retainer →</a></section>
</div>
Two self-serve plans plus a wide enterprise strip underneath that asks people to talk to sales instead of showing a price. The strip spans the full grid width with grid-column: 1 / -1, and its button leads to a contact page.
View code
<div class="ent">
<article><h3>Team</h3><p class="v">$20 <span>per seat / month</span></p><a href="#">Start trial</a></article>
<article><h3>Business</h3><p class="v">$45 <span>per seat / month</span></p><a href="#">Start trial</a></article>
<article class="wide"><div><h3>Enterprise</h3><p>Single sign-on, audit logs, custom contracts and a named account manager.</p></div><a href="#">Talk to sales</a></article>
</div>
Most pricing pages show two to four plans and highlight one. Raise or outline the recommended plan, label it with words such as Most popular, and keep the same feature order on every card so people can compare across them.
Prices that line up
font-variant-numeric: tabular-nums gives every digit the same width, so prices align across cards and the numbers do not jump when a billing switch changes them. State the period next to the price, such as per month or per seat.
Comparison tables need table markup
When you compare features across plans, use a real <table> with th scope="col" for plan names and th scope="row" for features. Screen readers then announce the plan and feature for each cell. Give ticks hidden text such as Included.
Responsive without breakpoints
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) fits as many cards as there is room for and drops to one column on phones by itself, so the three-tier layout needs no media query.
Frequently asked questions
Which demos use JavaScript?
The billing toggle and the usage calculator. The rest are pure HTML and CSS.
Can I add more plans?
Yes. The card grids use auto-fit, so a fourth card simply joins the row when there is space.
How do I show a discount?
State the saving in words, like 2 months free, rather than relying only on a struck-through price.