This block is a pricing section : three plans in cards with features and CTAs. Uses Rizzo Card component and semantic colors so it adapts to every theme.
Preview Pricing cards using Card component and button classes.
Starter $ 0
Free forever
Up to 3 projects Community support Get started Popular Pro $ 12/mo
Billed monthly
Unlimited projects Priority support Advanced analytics Start trial Enterprise Custom
Contact us
Everything in Pro SSO & SLA Dedicated support Contact sales Usage Copy the snippet for your framework. Card component (Astro/React/Vue) or raw HTML with card card--elevated (Svelte/Vanilla).
Usage Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Card from '../components/astro/Card.astro';
---
<div class="pricing-grid">
<Card variant="elevated" class="pricing-card">
<div class="card__body">
<h3 class="pricing-card__name">Starter</h3>
<p class="pricing-card__price"><span class="pricing-card__currency">$</span>0</p>
<p class="pricing-card__period">Free forever</p>
<ul class="pricing-card__features">
<li>Up to 3 projects</li>
<li>Community support</li>
</ul>
<a href="#" class="btn btn-outline pricing-card__cta">Get started</a>
</div>
</Card>
<Card variant="elevated" class="pricing-card pricing-card--featured">
<div class="card__body">
<span class="badge badge--primary pricing-card__badge">Popular</span>
<h3 class="pricing-card__name">Pro</h3>
<p class="pricing-card__price"><span class="pricing-card__currency">$</span>12<span class="pricing-card__period-inline">/mo</span></p>
<p class="pricing-card__period">Billed monthly</p>
<ul class="pricing-card__features">
<li>Unlimited projects</li>
<li>Priority support</li>
</ul>
<a href="#" class="btn btn-primary pricing-card__cta">Start trial</a>
</div>
</Card>
</div> <div class="pricing-grid">
<div class="card card--elevated pricing-card">
<div class="card__body">
<h3 class="pricing-card__name">Starter</h3>
<p class="pricing-card__price"><span class="pricing-card__currency">$</span>0</p>
<p class="pricing-card__period">Free forever</p>
<ul class="pricing-card__features">
<li>Up to 3 projects</li>
<li>Community support</li>
</ul>
<a href="#" class="btn btn-outline pricing-card__cta">Get started</a>
</div>
</div>
<div class="card card--elevated pricing-card pricing-card--featured">
<div class="card__body">
<span class="badge badge--primary pricing-card__badge">Popular</span>
<h3 class="pricing-card__name">Pro</h3>
<p class="pricing-card__price"><span class="pricing-card__currency">$</span>12<span class="pricing-card__period-inline">/mo</span></p>
<p class="pricing-card__period">Billed monthly</p>
<ul class="pricing-card__features">
<li>Unlimited projects</li>
<li>Priority support</li>
</ul>
<a href="#" class="btn btn-primary pricing-card__cta">Start trial</a>
</div>
</div>
</div> <script>
import { Card } from '$lib/rizzo';
</script>
<div class="pricing-grid">
<Card variant="elevated" class="pricing-card">
<div class="card__body">
<h3 class="pricing-card__name">Starter</h3>
<p class="pricing-card__price"><span class="pricing-card__currency">$</span>0</p>
<p class="pricing-card__period">Free forever</p>
<ul class="pricing-card__features">
<li>Up to 3 projects</li>
<li>Community support</li>
</ul>
<a href="#" class="btn btn-outline pricing-card__cta">Get started</a>
</div>
</Card>
<Card variant="elevated" class="pricing-card pricing-card--featured">
<div class="card__body">
<span class="badge badge--primary pricing-card__badge">Popular</span>
<h3 class="pricing-card__name">Pro</h3>
<p class="pricing-card__price"><span class="pricing-card__currency">$</span>12<span class="pricing-card__period-inline">/mo</span></p>
<p class="pricing-card__period">Billed monthly</p>
<ul class="pricing-card__features">
<li>Unlimited projects</li>
<li>Priority support</li>
</ul>
<a href="#" class="btn btn-primary pricing-card__cta">Start trial</a>
</div>
</Card>
</div> <script setup>
import Card from '@/components/rizzo/Card.vue';
</script>
<template>
<div class="pricing-grid">
<Card variant="elevated" class="pricing-card">
<div class="card__body">
<h3 class="pricing-card__name">Starter</h3>
<p class="pricing-card__price"><span class="pricing-card__currency">$</span>0</p>
<p class="pricing-card__period">Free forever</p>
<ul class="pricing-card__features">
<li>Up to 3 projects</li>
<li>Community support</li>
</ul>
<a href="#" class="btn btn-outline pricing-card__cta">Get started</a>
</div>
</Card>
<Card variant="elevated" class="pricing-card pricing-card--featured">
<div class="card__body">
<span class="badge badge--primary pricing-card__badge">Popular</span>
<h3 class="pricing-card__name">Pro</h3>
<p class="pricing-card__price"><span class="pricing-card__currency">$</span>12<span class="pricing-card__period-inline">/mo</span></p>
<p class="pricing-card__period">Billed monthly</p>
<ul class="pricing-card__features">
<li>Unlimited projects</li>
<li>Priority support</li>
</ul>
<a href="#" class="btn btn-primary pricing-card__cta">Start trial</a>
</div>
</Card>
</div>
</template> import { Card } from './components/react';
export function PricingBlock() {
return (
<div className="pricing-grid">
<Card variant="elevated" className="pricing-card">
<div className="card__body">
<h3 className="pricing-card__name">Starter</h3>
<p className="pricing-card__price"><span className="pricing-card__currency">$</span>0</p>
<p className="pricing-card__period">Free forever</p>
<ul className="pricing-card__features">
<li>Up to 3 projects</li>
<li>Community support</li>
</ul>
<a href="#" className="btn btn-outline pricing-card__cta">Get started</a>
</div>
</Card>
<Card variant="elevated" className="pricing-card pricing-card--featured">
<div className="card__body">
<span className="badge badge--primary pricing-card__badge">Popular</span>
<h3 className="pricing-card__name">Pro</h3>
<p className="pricing-card__price"><span className="pricing-card__currency">$</span>12<span className="pricing-card__period-inline">/mo</span></p>
<p className="pricing-card__period">Billed monthly</p>
<ul className="pricing-card__features">
<li>Unlimited projects</li>
<li>Priority support</li>
</ul>
<a href="#" className="btn btn-primary pricing-card__cta">Start trial</a>
</div>
</Card>
</div>
);
} Use in your project Cards use variant="elevated" (or card--elevated); prices and features use design tokens. Add your own links and copy.
Components used Card — elevated variant for each planButton — btn-primary for primary CTA, btn-outline for secondaryBadge — optional “Popular” label