Skip to content

component :: Pricing

The .pricingCard component is one tier of a pricing table: name, price, feature list, and a CTA pinned to the bottom so a row of tiers lines up. A pricing table is a row of these on the grid, with highlighted marking the recommended tier.

Starter

$0/month

For side projects.

  • 1 site
  • Community support
Get started

Pro

Popular

$29/month

For professionals.

  • 10 sites
  • Email support
  • Custom themes
Get started

Team

$99/month

For agencies.

  • Unlimited sites
  • Priority support
  • Custom themes
  • SSO
Get started
File Description Source
component.pricing.css Tier layout + highlight styles Github
component.card.css, component.badge.css, component.button.css Base visuals (dependencies) Github
PricingCard.astro The Astro component Github
icons/check.svg Feature list check icon Github
--pricingCard-* block in settings.ui.css Interface tokens (see table below) Github

It extends the card and uses the badge and button components.

Playground

Pro

$29 /month

For professionals.

  • 10 sites
  • Email support
Get started

Modifiers

Content

Copied!
<article class="card pricingCard">
<header class="pricingCard_header">
  <h3 class="pricingCard_name">Pro</h3>
</header>
<p class="pricingCard_price">
  <span class="pricingCard_amount">$29</span>
  <span class="pricingCard_period">/month</span>
</p>
<p class="pricingCard_description">For professionals.</p>
<ul class="pricingCard_features">
  <li><span class="pricingCard_check" aria-hidden="true"><svg>[…]</svg></span>10 sites</li>
  <li><span class="pricingCard_check" aria-hidden="true"><svg>[…]</svg></span>Email support</li>
</ul>
<div class="pricingCard_cta">
  <a class="bt bt-primary" href="#">Get started</a>
</div>
</article>

HTML

<article class="card pricingCard pricingCard-highlighted">
  <header class="pricingCard_header">
    <h3 class="pricingCard_name">Pro</h3>
    <span class="badge badge-primary">Popular</span>
  </header>
  <p class="pricingCard_price">
    <span class="pricingCard_amount">$29</span>
    <span class="pricingCard_period">/month</span>
  </p>
  <p class="pricingCard_description">For professionals.</p>
  <ul class="pricingCard_features">
    <li><span class="pricingCard_check" aria-hidden="true"><svg>[…]</svg></span>10 sites</li>
    <li><span class="pricingCard_check" aria-hidden="true"><svg>[…]</svg></span>Email support</li>
  </ul>
  <div class="pricingCard_cta">
    <a class="bt bt-primary" href="/signup">Get started</a>
  </div>
</article>

The highlight is a border-color swap plus a same-color ring (box-shadow), so the highlighted tier doesn’t shift the row’s layout.

Custom properties

Property Description
--pricingCard-highlight-border-color Border/ring color of the highlight.
--pricingCard-check-color Feature list check icon color.

Everything else comes from the card tokens.

Astro component

Prop Type Default Description
name string — Tier name. Required.
price string — Price as text ("$29", "Free"…). Required.
period string undefined Suffix after the price ("/month").
description string undefined One-liner under the price.
features string[] [] Feature list, one check per entry.
ctaLabel string "Get started" CTA button text.
ctaHref string undefined CTA link; no CTA renders without it (or the cta slot).
highlighted boolean false Recommended tier: primary ring + primary CTA.
badge string undefined Badge text next to the name ("Popular").
class string undefined Additional CSS classes.
Slot Description
cta Replace the default CTA button with your own markup.