Pricing Cards

Pricing card examples composed from cards, lists, badges, call-to-action buttons and utility classes.

Default

Use an article for a self-contained plan and connect it to the plan heading. Keep the price, billing period and included features as text so the offer does not depend on visual styling.

Starter

For individuals

€12per month

The essentials for personal projects and small prototypes.

One active project
Community support
All core components

<article class="card shadow-sm border-primary w-100 w-md-50 mx-auto" aria-labelledby="pricing-starter">
<header class="card-header d-flex flex-wrap align-items-center gap-2 mb-3">
	<h3 class="h4 card-title mb-0" id="pricing-starter">
		<span>Starter</span>
	</h3>
	<span class="badge bg-primary ms-auto">For individuals</span>
</header>
<div class="card-body d-flex flex-column gap-3">
	<p class="mb-0">
		<span class="h2">€12</span> <span class="text-muted">per month</span>
	</p>
	<p class="mb-0">The essentials for personal projects and small prototypes.</p>
	<ul class="list list-flush" aria-label="Included in Starter">
		<li class="list-item">
			<span class="list-item-text">One active project</span>
		</li>
		<li class="list-item">
			<span class="list-item-text">Community support</span>
		</li>
		<li class="list-item">
			<span class="list-item-text">All core components</span>
		</li>
	</ul>
	<button class="btn btn-solid btn-primary w-100" type="button">
		<span>Start Starter plan</span>
	</button>
</div>
</article>

Responsive comparison

Place plans in the responsive grid for side-by-side comparison. Each card uses the same content order, and the recommended plan is identified by visible text rather than color alone.

Free

Free forever

€0 forever

One workspace
Basic analytics
Community support

Pro

Business

Custom

Custom pricing

Team permissions
Security reviews
Dedicated support

<div class="grid">
<article class="card shadow-sm col-12 col-md-4 d-flex flex-column h-100" aria-labelledby="pricing-free">
	<header class="card-header d-flex flex-wrap align-items-center gap-2 mb-3">
		<h3 class="h5 card-title mb-0" id="pricing-free">Free</h3>
		<span class="badge bg-secondary ms-auto">Free forever</span>
	</header>
	<div class="card-body d-flex flex-column flex-grow-1 gap-3">
		<p class="mb-0"><span class="h2">€0</span> <span class="text-muted">forever</span></p>
		<ul class="list list-flush" aria-label="Included in Free">
			<li class="list-item"><span class="list-item-text">One workspace</span></li>
			<li class="list-item"><span class="list-item-text">Basic analytics</span></li>
			<li class="list-item"><span class="list-item-text">Community support</span></li>
		</ul>
		<button class="btn btn-outline btn-primary w-100 mt-auto" type="button">Choose Free</button>
	</div>
</article>

  <article class="card shadow-lg border-primary col-12 col-md-4 d-flex flex-column h-100" aria-labelledby="pricing-pro">
	<header class="card-header bg-primary bg-opacity-10 rounded-top d-flex flex-wrap align-items-center gap-2 pb-3 mb-3">
		<h3 class="h5 card-title mb-0" id="pricing-pro">Pro</h3>
		<span class="badge bg-success ms-auto">Most popular</span>
	</header>
	<div class="card-body d-flex flex-column flex-grow-1 gap-3">
		<p class="mb-0">
			<span class="h2">€24</span> <span class="text-muted">per user, per month</span>
		</p>
		<ul class="list list-flush" aria-label="Included in Pro">
			<li class="list-item"><span class="list-item-text">Unlimited projects</span></li>
			<li class="list-item"><span class="list-item-text">Advanced analytics</span></li>
			<li class="list-item"><span class="list-item-text">Priority support</span></li>
		</ul>
		<button class="btn btn-solid btn-primary w-100 mt-auto" type="button">Start Pro trial</button>
	</div>
  </article>

  <article
	class="card shadow-sm col-12 col-md-4 d-flex flex-column h-100"
	aria-labelledby="pricing-business">
	<header class="card-header d-flex flex-wrap align-items-center gap-2 mb-3">
		<h3 class="h5 card-title mb-0" id="pricing-business">Business</h3>
		<span class="badge bg-inverse ms-auto">Custom</span>
	</header>
	<div class="card-body d-flex flex-column flex-grow-1 gap-3">
		<p class="h2 mb-0">Custom pricing</p>
		<ul class="list list-flush" aria-label="Included in Business">
			<li class="list-item"><span class="list-item-text">Team permissions</span></li>
			<li class="list-item"><span class="list-item-text">Security reviews</span></li>
			<li class="list-item"><span class="list-item-text">Dedicated support</span></li>
		</ul>
		<button class="btn btn-outline btn-primary w-100 mt-auto" type="button">Contact sales</button>
	</div>
  </article>

</div>