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`, `atom.badge.css`, `atom.button.css`	Base visuals (dependencies)	Github
`PricingCard.astro`	The Astro component	Github
`icons/check.svg`	Feature list check icon	Github
`--pricingCard-*` block in default theme	Theme tokens (see table below)	Github

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

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.