Library · Content Sections

Content / Pricing Plan Cards

2–4 tiered pricing/plan cards with feature lists and a "most popular" accent; equal-height cards. Supply `priceAnnual` on any plan to render a monthly/annual billing toggle (no-JS, CSS :has(); prices selected via the unit-tested selectBillingPrice). Tone via the shared contract.

Figma: Content / Pricing Plan Cards ↗

Live preview — edit theme bottom-right

---
import PricingCards from "../components/figma/PricingCards.astro";
---
<PricingCards
  heading="Simple, transparent pricing"
  intro="Choose the package that fits your project. No hidden fees."
  tone="base-200"
  plans={[
    { name: "Starter", price: "$240", period: "/ month", priceAnnual: "$2,400", periodAnnual: "/ year", features: ["5-page website", "Custom design", "Mobile responsive", "Basic SEO"], cta: { label: "Get started", href: "#" } },
    { name: "Growth", price: "$480", period: "/ month", priceAnnual: "$4,800", periodAnnual: "/ year", featured: true, features: ["12-page website", "Custom design", "Email marketing setup", "Advanced SEO", "3 months support"], cta: { label: "Choose Growth", href: "#" } },
    { name: "Enterprise", price: "Custom", features: ["Unlimited pages", "Bespoke integrations", "Dedicated manager", "24/7 support"], cta: { label: "Talk to us", href: "#" } },
  ]}
/>

Props

Name	Type	Required	Description
`heading`	`string;`	—	Optional section heading
`intro`	`string;`	—	Optional intro under the heading
`plans`	`Plan[];`	Yes	2–4 plans
`billingLabels`	`{ monthly: string; annual: string };`	—	Labels for the billing toggle (only shown when a plan has annual pricing)
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<PricingCards
  heading="Simple, transparent pricing"
  tone="base-200"
  plans={[
    { name: "Starter", price: "$240", period: "/ month", priceAnnual: "$2,400", periodAnnual: "/ year", features: ["5-page website", "Custom design"], cta: { label: "Get started", href: "#" } },
    { name: "Growth", price: "$480", period: "/ month", priceAnnual: "$4,800", periodAnnual: "/ year", featured: true, features: ["12-page website", "Email marketing"], cta: { label: "Choose Growth", href: "#" } },
    { name: "Enterprise", price: "Custom", features: ["Unlimited pages", "Dedicated manager"], cta: { label: "Talk to us", href: "#" } },
  ]}
/>