CardsStable

Pricing Card

Sourcecomponents/cards/PricingCard.astro

Tiers

A pricing column — badge, label, price, description, a features checklist and a CTA. Mark one featured to lift it and invert it to ink.

Tier name

CHF 00/ month

A one-line description of the tier.

Feature one
Feature two
Feature three
Feature four

Get started

Tier name

Props

Prop	Type	Default	Notes
`label`	string	`—`	Tier name (e.g. "Guided").
`price`	string	`—`	The price (e.g. "CHF 99").
`note`	string	`—`	Small note beside the price (e.g. "/ month").
`body`	string	`—`	One-line description of the tier.
`features`	string[]	`[]`	Checklist items.
`cta`	string	`'Get started'`	Button label.
`ctaHref`	string	`'#'`	Button destination.
`badge`	string	`—`	Ribbon (e.g. "Most popular").
`featured`	boolean	`false`	Lifts the card and inverts it to ink.

Usage

Pass features as an array. The CTA is a real Button — it inverts on the featured card.

<PricingCard
  label="Tier name"
  price="CHF 00"
  note="/ month"
  body="A one-line description of the tier."
  features={['Feature one', 'Feature two', 'Feature three']}
  cta="Get started"
  ctaHref="#"
/>

Rules

Feature at most one tier — the one you want chosen.

Keep feature lists parallel in length across tiers.

Don't

Feature every tier — nothing stands out.

Bury the price in the body — it’s the headline.