प्राइसिंग
Monthly / Annual Toggle
A pricing grid with a real switch that recomputes every price.
#pricing#toggle#switch
6 फ्रेमवर्कमध्यम
Loading…
The canonical Starter / Pro / Enterprise grid, with the middle tier promoted.
<!--
The tiers are a <ul>, not three sibling <article>s. A screen reader then
announces "list, 3 items" before the first plan, which is the one fact a
non-sighted user cannot get any other way: how many options they are choosing
between. The visual grid is the list's styling, not its structure.
-->
<section class="tiers" aria-labelledby="tiers-heading">
<h2 class="tiers__heading" id="tiers-heading">Simple, predictable pricing</h2>
<p class="tiers__sub">No setup fees. Cancel any time.</p>
<ul class="tiers__list">
<li class="tiers__item">
<article class="tiers__card" aria-labelledby="tiers-starter">
<h3 class="tiers__name" id="tiers-starter">Starter</h3>
<p class="tiers__blurb">For side projects and trials.</p>
<p class="tiers__price">
<span class="tiers__amount">$0</span>
<span class="tiers__period">/month</span>
</p>
<ul class="tiers__features">
<li class="tiers__feature">
<svg class="tiers__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
3 projects
</li>
<li class="tiers__feature">
<svg class="tiers__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
Community support
</li>
<li class="tiers__feature">
<svg class="tiers__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
1 GB storage
</li>
</ul>
<a class="tiers__cta" href="#">Get started<span class="tiers__sr"> with Starter</span></a>
</article>
</li>
<li class="tiers__item">
<article class="tiers__card tiers__card--highlighted" aria-labelledby="tiers-pro">
<p class="tiers__badge">Most popular</p>
<h3 class="tiers__name" id="tiers-pro">Pro</h3>
<p class="tiers__blurb">For teams shipping to production.</p>
<p class="tiers__price">
<span class="tiers__amount">$19</span>
<span class="tiers__period">/month</span>
</p>
<ul class="tiers__features">
<li class="tiers__feature">
<svg class="tiers__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
Unlimited projects
</li>
<li class="tiers__feature">
<svg class="tiers__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
Priority support
</li>
<li class="tiers__feature">
<svg class="tiers__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
100 GB storage
</li>
</ul>
<a class="tiers__cta tiers__cta--solid" href="#">Get started<span class="tiers__sr"> with Pro</span></a>
</article>
</li>
<li class="tiers__item">
<article class="tiers__card" aria-labelledby="tiers-enterprise">
<h3 class="tiers__name" id="tiers-enterprise">Enterprise</h3>
<p class="tiers__blurb">For organisations with contracts.</p>
<p class="tiers__price">
<span class="tiers__amount">$49</span>
<span class="tiers__period">/month</span>
</p>
<ul class="tiers__features">
<li class="tiers__feature">
<svg class="tiers__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
SSO and SCIM
</li>
<li class="tiers__feature">
<svg class="tiers__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
99.9% uptime SLA
</li>
<li class="tiers__feature">
<svg class="tiers__check" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
Unlimited storage
</li>
</ul>
<a class="tiers__cta" href="#">Get started<span class="tiers__sr"> with Enterprise</span></a>
</article>
</li>
</ul>
</section>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
tiers | Tier[] | TIERS | मूल्य-स्तर, प्रदर्शन क्रम में। |
ctaLabel | string | 'Get started' | कॉल-टू-एक्शन बटन का टेक्स्ट। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The tiers are a `<ul>`, which is the decision worth keeping: a screen reader then announces "list, 3 items" before the first plan, and how many options exist is precisely the fact a non-sighted user cannot recover from the visual grid. The layout jumps from one column straight to three and deliberately skips two - at that width the third tier wraps onto a row of its own and reads as an afterthought rather than a peer. Every CTA says "Get started", so each carries an `sr-only` suffix naming its tier; links are read out of context in a screen reader’s link list, where three identical "Get started" entries are useless. Swap which tier is `highlighted` and the badge, border and solid CTA follow together - they are one flag, not three.