pricing open-core free team saas subscription pricing open-core free pro team saas subscription billing-toggle annual monthly open-core pricing with free and pro tiers pricing section for individual and team plans saas pricing with billing toggle
Pricing Open Core
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/open-core.json open-core.html
<section class="ws-pricing bg-[var(--ws-pricing-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<!-- Heading -->
<div class="mb-12 text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-pricing-text)] sm:text-4xl">Simple, transparent pricing</h2>
<p class="mt-4 text-lg text-[var(--ws-pricing-text-soft)]">Free for individuals and open-source projects. Scale up when your team does.</p>
</div>
<!-- Billing toggle -->
<div class="mb-10 flex items-center justify-center gap-3" role="group" aria-label="Billing period">
<button
id="billing-monthly"
class="ws-billing-btn rounded-lg px-4 py-2 text-sm font-medium transition"
aria-pressed="true"
>Monthly</button>
<button
id="billing-annual"
class="ws-billing-btn rounded-lg px-4 py-2 text-sm font-medium transition"
aria-pressed="false"
>
Annual
<span class="ml-1.5 rounded-full bg-[var(--ws-pricing-highlight-bg)] px-2 py-0.5 text-xs font-semibold text-[var(--ws-pricing-highlight-text)]">Save 20%</span>
</button>
</div>
<!-- Cards -->
<div class="grid gap-6 md:grid-cols-2">
<!-- Free Card -->
<article class="flex flex-col rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-8">
<div>
<div class="mb-1 text-sm font-semibold uppercase tracking-widest text-[var(--ws-pricing-text-muted)]">Free</div>
<div class="mt-3 flex items-baseline gap-1">
<span class="text-4xl font-bold text-[var(--ws-pricing-text)]">$0</span>
<span class="text-sm text-[var(--ws-pricing-text-muted)]">/ forever</span>
</div>
<p class="mt-3 text-sm text-[var(--ws-pricing-text-soft)]">Perfect for individuals, students, and open-source projects. No credit card required.</p>
</div>
<ul class="mt-8 space-y-3 text-sm text-[var(--ws-pricing-text-soft)]" aria-label="Free plan features">
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Unlimited personal workspaces
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
10 GB storage included
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Full offline & local-first mode
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Community support
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-pricing-highlight-bg)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Open-source self-hosting
</li>
<li class="flex items-start gap-3 text-[var(--ws-pricing-text-muted)]">
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
Team collaboration
</li>
<li class="flex items-start gap-3 text-[var(--ws-pricing-text-muted)]">
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
Priority support
</li>
</ul>
<div class="mt-10">
<a
href="#"
class="block w-full rounded-xl border border-[var(--ws-pricing-card-border)] bg-transparent px-5 py-3 text-center text-sm font-semibold text-[var(--ws-pricing-text)] transition hover:bg-[var(--ws-pricing-text)]/5"
>Get Started Free</a>
</div>
</article>
<!-- Pro Card (highlighted) -->
<article class="relative flex flex-col rounded-2xl bg-[var(--ws-pricing-highlight-bg)] p-8 text-[var(--ws-pricing-highlight-text)]">
<!-- Popular badge -->
<div class="absolute -top-3.5 left-1/2 -translate-x-1/2">
<span class="rounded-full bg-[var(--ws-pricing-action-bg)] px-3.5 py-1 text-xs font-bold uppercase tracking-wider text-[var(--ws-pricing-action-text)]">Most Popular</span>
</div>
<div>
<div class="mb-1 text-sm font-semibold uppercase tracking-widest opacity-70">Pro</div>
<div class="mt-3 flex items-baseline gap-1">
<span id="pro-price" class="text-4xl font-bold">$12</span>
<span class="text-sm opacity-70" id="pro-period">/ mo per seat</span>
</div>
<p class="mt-3 text-sm opacity-80">For teams that need real-time collaboration, advanced AI, and admin controls.</p>
</div>
<ul class="mt-8 space-y-3 text-sm opacity-90" aria-label="Pro plan features">
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Everything in Free
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Unlimited team members
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
100 GB storage per seat
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Real-time multiplayer sync
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
AI writing, summarize & translate
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Admin controls & audit logs
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Priority email support
</li>
</ul>
<div class="mt-10">
<a
href="#"
class="block w-full rounded-xl bg-[var(--ws-pricing-action-bg)] px-5 py-3 text-center text-sm font-semibold text-[var(--ws-pricing-action-text)] transition hover:bg-[var(--ws-pricing-action-bg-hover)]"
>Start Free Trial</a>
<p class="mt-3 text-center text-xs opacity-60">14-day free trial · No credit card required</p>
</div>
</article>
</div>
<!-- Open-core note -->
<p class="mt-8 text-center text-sm text-[var(--ws-pricing-text-muted)]">
Free for individuals and open-source —
<strong class="font-medium text-[var(--ws-pricing-text-soft)]">commercial and team use requires a subscription.</strong>
</p>
</div>
<script>
(function () {
const monthlyBtn = document.getElementById('billing-monthly');
const annualBtn = document.getElementById('billing-annual');
const priceEl = document.getElementById('pro-price');
const periodEl = document.getElementById('pro-period');
const MONTHLY = '$12';
const ANNUAL = '$10';
function setActive(btn, other) {
btn.setAttribute('aria-pressed', 'true');
btn.style.cssText = 'background:var(--ws-pricing-card-bg);color:var(--ws-pricing-text);box-shadow:0 1px 3px 0 oklch(0 0 0 / .08)';
other.setAttribute('aria-pressed', 'false');
other.style.cssText = 'background:transparent;color:var(--ws-pricing-text-muted);box-shadow:none';
}
setActive(monthlyBtn, annualBtn);
monthlyBtn.addEventListener('click', () => {
setActive(monthlyBtn, annualBtn);
priceEl.textContent = MONTHLY;
periodEl.textContent = '/ mo per seat';
});
annualBtn.addEventListener('click', () => {
setActive(annualBtn, monthlyBtn);
priceEl.textContent = ANNUAL;
periodEl.textContent = '/ mo per seat, billed annually';
});
})();
</script>
</section>
Details
Responsive Dark Mode SSR Safe Copy & Paste
Stable Published
pricingopen-corefreeteamsaassubscription
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle above the pricing cards. |
| billing-toggle | No | Monthly/Annual billing switch with savings badge. |
| free-card | Yes | Free plan card with feature list and CTA. |
| pro-card | Yes | Highlighted Pro plan card with dynamic price, feature list, trial CTA, and popular badge. |
| open-core-note | No | Small print below the cards explaining the open-core licensing model. |
Zwei-Spalten-Pricing für Open-Core-Produkte: eine Free-Karte für Einzelpersonen und Open-Source-Projekte, eine hervorgehobene Pro-Karte für Teams. Ein Monthly/Annual-Toggle schaltet den Preis per JavaScript um. Unter den Karten klärt ein kurzer Hinweis das Lizenzmodell. Inspiriert von AFFiNE’s Pricing-Sektion.