Home / Snippets / Pricing / Software pricing with billing switch Try the design Preview widthFit panel Mobile · 390 px Tablet · 768 px Desktop · 1280 px Open demo ↗
Preview links stay in the example. Copy the source to use your own destinations. Form previews never send information.
Copy the source HTML CSS JavaScript Astro
Copy HTML <section class="fct-software-billing-pricing s-pricing s-billing" data-snippet="software-billing-pricing" aria-labelledby="fct-software-billing-pricing-heading"><div class="s-wrap"><p class="s-kicker">Clear options. Useful details.</p><h2 id="fct-software-billing-pricing-heading">Choose the scope that fits.</h2><p class="s-pricing-intro">Editable example prices and inclusions. Replace these with your actual scope, tax treatment and billing terms.</p><fieldset class="s-billing"><legend>Billing period</legend><label><input type="radio" name="fct-software-billing-pricing-billing" value="monthly" checked> Monthly</label><label><input type="radio" name="fct-software-billing-pricing-billing" value="annual"> Annually</label></fieldset><p role="status" class="s-billing-status">Showing sample monthly prices.</p><div class="s-prices"><article><div><p class="s-kicker">01 / Package</p><h3>Solo</h3></div><div class="s-price"><strong data-price="12" data-annual="120">€12</strong><p data-billing-note>per month</p></div><ul><li>1 workspace</li><li>3 active projects</li><li>Self-serve help center</li></ul><a class="s-button" href="contact.html">Discuss Solo</a></article><article><div><p class="s-kicker">02 / Package</p><h3>Team</h3></div><div class="s-price"><strong data-price="29" data-annual="290">€29</strong><p data-billing-note>per month</p></div><ul><li>3 workspaces</li><li>20 active projects</li><li>Shared team access</li></ul><a class="s-button" href="contact.html">Discuss Team</a></article><article><div><p class="s-kicker">03 / Package</p><h3>Studio</h3></div><div class="s-price"><strong data-price="59" data-annual="590">€59</strong><p data-billing-note>per month</p></div><ul><li>10 workspaces</li><li>100 active projects</li><li>Account support</li></ul><a class="s-button" href="contact.html">Discuss Studio</a></article></div></div></section>
Copy CSS .fct-software-billing-pricing{--s-bg:#202620;--s-ink:#ffffff;--s-accent:#d8e7bb;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-software-billing-pricing,.fct-software-billing-pricing *{box-sizing:border-box}.fct-software-billing-pricing :is(h2,h3,p,ul,figure){margin:0}.fct-software-billing-pricing h2,.fct-software-billing-pricing h3{line-height:1.2;letter-spacing:-.035em}.fct-software-billing-pricing h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-software-billing-pricing a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-software-billing-pricing :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-software-billing-pricing button,.fct-software-billing-pricing input,.fct-software-billing-pricing textarea,.fct-software-billing-pricing select{font:inherit}.fct-software-billing-pricing a,.fct-software-billing-pricing button{touch-action:manipulation}.fct-software-billing-pricing .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-software-billing-pricing .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-software-billing-pricing .s-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 21px;border:1px solid currentColor;text-decoration:none;background:transparent;color:inherit;cursor:pointer;border-radius:2px;font-weight:600}.fct-software-billing-pricing .s-muted{opacity:.82}.fct-software-billing-pricing .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-software-billing-pricing .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-software-billing-pricing .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-software-billing-pricing .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-software-billing-pricing img{max-width:100%;height:auto;display:block}.fct-software-billing-pricing .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-software-billing-pricing .s-wrap{padding:30px 20px}.fct-software-billing-pricing .s-grid{grid-template-columns:1fr}}
.fct-software-billing-pricing .s-pricing-intro{max-width:64ch;margin:22px 0 40px}.fct-software-billing-pricing .s-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.fct-software-billing-pricing .s-prices article{border:1px solid currentColor;padding:28px;display:flex;flex-direction:column;gap:26px;min-width:0}.fct-software-billing-pricing .s-prices h3{font-size:1.6rem}.fct-software-billing-pricing .s-prices ul{padding-left:20px;line-height:2}.fct-software-billing-pricing .s-prices .s-button{margin-top:auto}.fct-software-billing-pricing .s-price strong{font-size:2.7rem;letter-spacing:-.05em;overflow-wrap:anywhere}.fct-software-billing-pricing .s-price p{font-size:.875rem}.fct-software-billing-pricing.s-rows .s-prices{display:block}.fct-software-billing-pricing.s-rows article{display:grid;grid-template-columns:1.2fr .7fr 1.5fr auto;align-items:center;margin-bottom:16px;border-inline:0;padding-inline:0}.fct-software-billing-pricing .s-billing{display:flex;flex-wrap:wrap;gap:22px;border:1px solid currentColor;padding:18px;margin:30px 0 15px;max-width:400px}.fct-software-billing-pricing .s-billing label{min-height:44px;align-content:center;cursor:pointer}.fct-software-billing-pricing .s-billing input{width:20px;height:20px;accent-color:var(--s-accent);vertical-align:middle}.fct-software-billing-pricing .s-billing-status{font-size:.875rem;margin-bottom:25px}.fct-software-billing-pricing .s-table-scroll{max-width:100%;overflow:auto}.fct-software-billing-pricing table{border-collapse:collapse;min-width:660px;width:100%;text-align:left}.fct-software-billing-pricing caption{text-align:left;font-weight:600;margin-bottom:18px}.fct-software-billing-pricing :is(th,td){padding:20px;border:1px solid #b3b9aa;vertical-align:top}.fct-software-billing-pricing th span{font-size:.875rem;font-weight:400}.fct-software-billing-pricing .s-rate-layout{display:grid;grid-template-columns:2fr 1fr;gap:50px}.fct-software-billing-pricing .s-rate{display:flex;justify-content:space-between;gap:25px;border-top:1px solid currentColor;padding:28px 0}.fct-software-billing-pricing .s-rate strong{flex:none}.fct-software-billing-pricing .s-rate p{margin-top:12px}.fct-software-billing-pricing aside{border:1px solid currentColor;padding:28px;align-self:start}.fct-software-billing-pricing aside p{margin:20px 0 30px}@media(max-width:900px){.fct-software-billing-pricing.s-rows article{grid-template-columns:1fr 1fr}.fct-software-billing-pricing.s-rows ul{grid-column:1/-1}}@media(max-width:700px){.fct-software-billing-pricing .s-prices,.fct-software-billing-pricing .s-rate-layout{grid-template-columns:1fr}.fct-software-billing-pricing .s-rate{flex-direction:column}.fct-software-billing-pricing.s-rows article{grid-template-columns:1fr}.fct-software-billing-pricing .s-prices article{padding:24px}}Copy JavaScript (()=>{for(const root of document.querySelectorAll('[data-snippet="software-billing-pricing"]')){if(root.dataset.initialized)continue;root.dataset.initialized='true';for(const input of root.querySelectorAll('.s-billing input'))input.addEventListener('change',()=>{const annual=input.value==='annual';for(const price of root.querySelectorAll('[data-price]')){const amount=annual?Number(price.dataset.annual)/12:Number(price.dataset.price);price.textContent=new Intl.NumberFormat('en-IE',{style:'currency',currency:'EUR',maximumFractionDigits:2}).format(amount);price.nextElementSibling.textContent=annual?'per month equivalent · €'+price.dataset.annual+' billed annually':'per month';}root.querySelector('[role=status]').textContent=annual?'Showing annual totals and their monthly equivalents.':'Showing sample monthly prices.';});}})();
Copy Astro ---
// Generated, escaped static markup. Use a distinct prefix for each instance.
const markup = "\u003csection class=\"fct-software-billing-pricing s-pricing s-billing\" data-snippet=\"software-billing-pricing\" aria-labelledby=\"fct-software-billing-pricing-heading\"\u003e\u003cdiv class=\"s-wrap\"\u003e\u003cp class=\"s-kicker\"\u003eClear options. Useful details.\u003c/p\u003e\u003ch2 id=\"fct-software-billing-pricing-heading\"\u003eChoose the scope that fits.\u003c/h2\u003e\u003cp class=\"s-pricing-intro\"\u003eEditable example prices and inclusions. Replace these with your actual scope, tax treatment and billing terms.\u003c/p\u003e\u003cfieldset class=\"s-billing\"\u003e\u003clegend\u003eBilling period\u003c/legend\u003e\u003clabel\u003e\u003cinput type=\"radio\" name=\"fct-software-billing-pricing-billing\" value=\"monthly\" checked\u003e Monthly\u003c/label\u003e\u003clabel\u003e\u003cinput type=\"radio\" name=\"fct-software-billing-pricing-billing\" value=\"annual\"\u003e Annually\u003c/label\u003e\u003c/fieldset\u003e\u003cp role=\"status\" class=\"s-billing-status\"\u003eShowing sample monthly prices.\u003c/p\u003e\u003cdiv class=\"s-prices\"\u003e\u003carticle\u003e\u003cdiv\u003e\u003cp class=\"s-kicker\"\u003e01 / Package\u003c/p\u003e\u003ch3\u003eSolo\u003c/h3\u003e\u003c/div\u003e\u003cdiv class=\"s-price\"\u003e\u003cstrong data-price=\"12\" data-annual=\"120\"\u003e€12\u003c/strong\u003e\u003cp data-billing-note\u003eper month\u003c/p\u003e\u003c/div\u003e\u003cul\u003e\u003cli\u003e1 workspace\u003c/li\u003e\u003cli\u003e3 active projects\u003c/li\u003e\u003cli\u003eSelf-serve help center\u003c/li\u003e\u003c/ul\u003e\u003ca class=\"s-button\" href=\"contact.html\"\u003eDiscuss Solo\u003c/a\u003e\u003c/article\u003e\u003carticle\u003e\u003cdiv\u003e\u003cp class=\"s-kicker\"\u003e02 / Package\u003c/p\u003e\u003ch3\u003eTeam\u003c/h3\u003e\u003c/div\u003e\u003cdiv class=\"s-price\"\u003e\u003cstrong data-price=\"29\" data-annual=\"290\"\u003e€29\u003c/strong\u003e\u003cp data-billing-note\u003eper month\u003c/p\u003e\u003c/div\u003e\u003cul\u003e\u003cli\u003e3 workspaces\u003c/li\u003e\u003cli\u003e20 active projects\u003c/li\u003e\u003cli\u003eShared team access\u003c/li\u003e\u003c/ul\u003e\u003ca class=\"s-button\" href=\"contact.html\"\u003eDiscuss Team\u003c/a\u003e\u003c/article\u003e\u003carticle\u003e\u003cdiv\u003e\u003cp class=\"s-kicker\"\u003e03 / Package\u003c/p\u003e\u003ch3\u003eStudio\u003c/h3\u003e\u003c/div\u003e\u003cdiv class=\"s-price\"\u003e\u003cstrong data-price=\"59\" data-annual=\"590\"\u003e€59\u003c/strong\u003e\u003cp data-billing-note\u003eper month\u003c/p\u003e\u003c/div\u003e\u003cul\u003e\u003cli\u003e10 workspaces\u003c/li\u003e\u003cli\u003e100 active projects\u003c/li\u003e\u003cli\u003eAccount support\u003c/li\u003e\u003c/ul\u003e\u003ca class=\"s-button\" href=\"contact.html\"\u003eDiscuss Studio\u003c/a\u003e\u003c/article\u003e\u003c/div\u003e\u003c/div\u003e\u003c/section\u003e";
---
<Fragment set:html={markup} />
<style is:global>
.fct-software-billing-pricing{--s-bg:#202620;--s-ink:#ffffff;--s-accent:#d8e7bb;font:16px/1.65 system-ui,sans-serif;color:var(--s-ink);background:var(--s-bg)}.fct-software-billing-pricing,.fct-software-billing-pricing *{box-sizing:border-box}.fct-software-billing-pricing :is(h2,h3,p,ul,figure){margin:0}.fct-software-billing-pricing h2,.fct-software-billing-pricing h3{line-height:1.2;letter-spacing:-.035em}.fct-software-billing-pricing h2{font-size:clamp(1.8rem,4vw,3.5rem)}.fct-software-billing-pricing a{color:inherit;text-underline-offset:5px;overflow-wrap:anywhere}.fct-software-billing-pricing :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--s-accent);outline-offset:4px}.fct-software-billing-pricing button,.fct-software-billing-pricing input,.fct-software-billing-pricing textarea,.fct-software-billing-pricing select{font:inherit}.fct-software-billing-pricing a,.fct-software-billing-pricing button{touch-action:manipulation}.fct-software-billing-pricing .s-wrap{max-width:1200px;margin-inline:auto;padding:40px 28px}.fct-software-billing-pricing .s-kicker{font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}.fct-software-billing-pricing .s-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 21px;border:1px solid currentColor;text-decoration:none;background:transparent;color:inherit;cursor:pointer;border-radius:2px;font-weight:600}.fct-software-billing-pricing .s-muted{opacity:.82}.fct-software-billing-pricing .s-links{display:flex;gap:8px 26px;flex-wrap:wrap}.fct-software-billing-pricing .s-links a{display:inline-flex;align-items:center;min-height:44px}.fct-software-billing-pricing .s-rule{border-top:1px solid currentColor;padding-top:20px;margin-top:30px}.fct-software-billing-pricing .s-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.fct-software-billing-pricing img{max-width:100%;height:auto;display:block}.fct-software-billing-pricing .s-brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;text-decoration:none}@media(max-width:640px){.fct-software-billing-pricing .s-wrap{padding:30px 20px}.fct-software-billing-pricing .s-grid{grid-template-columns:1fr}}
.fct-software-billing-pricing .s-pricing-intro{max-width:64ch;margin:22px 0 40px}.fct-software-billing-pricing .s-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.fct-software-billing-pricing .s-prices article{border:1px solid currentColor;padding:28px;display:flex;flex-direction:column;gap:26px;min-width:0}.fct-software-billing-pricing .s-prices h3{font-size:1.6rem}.fct-software-billing-pricing .s-prices ul{padding-left:20px;line-height:2}.fct-software-billing-pricing .s-prices .s-button{margin-top:auto}.fct-software-billing-pricing .s-price strong{font-size:2.7rem;letter-spacing:-.05em;overflow-wrap:anywhere}.fct-software-billing-pricing .s-price p{font-size:.875rem}.fct-software-billing-pricing.s-rows .s-prices{display:block}.fct-software-billing-pricing.s-rows article{display:grid;grid-template-columns:1.2fr .7fr 1.5fr auto;align-items:center;margin-bottom:16px;border-inline:0;padding-inline:0}.fct-software-billing-pricing .s-billing{display:flex;flex-wrap:wrap;gap:22px;border:1px solid currentColor;padding:18px;margin:30px 0 15px;max-width:400px}.fct-software-billing-pricing .s-billing label{min-height:44px;align-content:center;cursor:pointer}.fct-software-billing-pricing .s-billing input{width:20px;height:20px;accent-color:var(--s-accent);vertical-align:middle}.fct-software-billing-pricing .s-billing-status{font-size:.875rem;margin-bottom:25px}.fct-software-billing-pricing .s-table-scroll{max-width:100%;overflow:auto}.fct-software-billing-pricing table{border-collapse:collapse;min-width:660px;width:100%;text-align:left}.fct-software-billing-pricing caption{text-align:left;font-weight:600;margin-bottom:18px}.fct-software-billing-pricing :is(th,td){padding:20px;border:1px solid #b3b9aa;vertical-align:top}.fct-software-billing-pricing th span{font-size:.875rem;font-weight:400}.fct-software-billing-pricing .s-rate-layout{display:grid;grid-template-columns:2fr 1fr;gap:50px}.fct-software-billing-pricing .s-rate{display:flex;justify-content:space-between;gap:25px;border-top:1px solid currentColor;padding:28px 0}.fct-software-billing-pricing .s-rate strong{flex:none}.fct-software-billing-pricing .s-rate p{margin-top:12px}.fct-software-billing-pricing aside{border:1px solid currentColor;padding:28px;align-self:start}.fct-software-billing-pricing aside p{margin:20px 0 30px}@media(max-width:900px){.fct-software-billing-pricing.s-rows article{grid-template-columns:1fr 1fr}.fct-software-billing-pricing.s-rows ul{grid-column:1/-1}}@media(max-width:700px){.fct-software-billing-pricing .s-prices,.fct-software-billing-pricing .s-rate-layout{grid-template-columns:1fr}.fct-software-billing-pricing .s-rate{flex-direction:column}.fct-software-billing-pricing.s-rows article{grid-template-columns:1fr}.fct-software-billing-pricing .s-prices article{padding:24px}}
</style>
<script is:inline>
(()=>{for(const root of document.querySelectorAll('[data-snippet="software-billing-pricing"]')){if(root.dataset.initialized)continue;root.dataset.initialized='true';for(const input of root.querySelectorAll('.s-billing input'))input.addEventListener('change',()=>{const annual=input.value==='annual';for(const price of root.querySelectorAll('[data-price]')){const amount=annual?Number(price.dataset.annual)/12:Number(price.dataset.price);price.textContent=new Intl.NumberFormat('en-IE',{style:'currency',currency:'EUR',maximumFractionDigits:2}).format(amount);price.nextElementSibling.textContent=annual?'per month equivalent · €'+price.dataset.annual+' billed annually':'per month';}root.querySelector('[role=status]').textContent=annual?'Showing annual totals and their monthly equivalents.':'Showing sample monthly prices.';});}})();
</script>
Code tabs need JavaScript. All source formats are included in the open downloads.
Where this design fits A native radio group changes the displayed billing option. Annual mode shows the annual total and its monthly equivalent; the supplied sample values are examples, not live subscription prices.
Monthly/annual radio group Explicit annual totals Polite price announcements What is included The HTML ZIP includes a standalone demo, reusable markup, scoped CSS, its small JavaScript runtime, a license and setup notes. The Astro ZIP includes Snippet.astro. It can be imported into an existing Astro page or layout.
Replace the demonstration prices Update every price, currency, billing period, inclusion and tax statement. Action links lead to your chosen enquiry or checkout destination; this snippet does not create subscriptions, process payments or enforce plan limits.
Add it to an HTML website Copy snippet.html into the relevant page section. Load snippet.css after your existing site stylesheet. The class prefix identifies this design. Load snippet.js once with defer. Keep the included keyboard behavior when adapting interactions. Replace example content and check mobile widths, zoom, links and keyboard focus in your actual website. Use it in Astro Copy Snippet.astro into src/components/, import it into your page or shared layout, and insert the component where the section belongs. Keep each generated prefix unique if you duplicate a component on one page.
Keep the section maintainable Start with the variables at the top of the CSS for background, text and accent colors. Preserve semantic labels and focus styles. Existing site selectors can still affect imported markup, so test the combined result. Read the complete setup notes .
