BlocksStable

Pricing

Sourcecomponents/blocks/PricingSection.astro

Three tiers

A full pricing block — an Eyebrow + heading over a row of Pricing Cards. Up to three tiers; mark one featured. Centred in the Medium (1360px) container.

Switch viewport — the block renders at each breakpoint's true size, scaled to fit.

Three tiers

Two tiers

With two tiers the pair sits tighter and centred.

Two tiers

On dark

surface="dark" puts the whole block on ink — the featured card still inverts.

Pricing

Simple, honest pricing

Two ways to work with us.

Guided

CHF 99/ month

Build your brand with us, step by step.

Guided build wizard
Hosting included
Courses & masterclasses
Cancel anytime

Start building

Crafted

Built from

Pricing Card — each tier (with its Badge & Button)
Eyebrow — the small label above the heading

Props

Prop	Type	Default	Notes
`heading`	string	`—`	Section heading (supports <em> for a serif accent). Required.
`tiers`	Tier[]	`—`	Two or three tiers — {label, price, note, body, features, cta, ctaHref, badge, featured}.
`eyebrow`	string	`'Pricing'`	Small label above the heading.
`lead`	string	`—`	Supporting line under the heading.
`footnote`	string	`—`	Small print under the cards.
`surface`	'light' \| 'dark'	`'light'`	Flows through to the section (cards keep their own featured invert).

Usage

Pass two or three tiers. Wrap an accent word in <em> for the serif twist.

<PricingSection
  eyebrow="Pricing"
  heading="Simple, honest <em>pricing</em>"
  lead="Pick the tier that fits."
  tiers={[
    { label: 'Guided',  price: 'CHF 99',    note: '/ month', features: [...], cta: 'Start building' },
    { label: 'Crafted', price: 'CHF 4,200', featured: true, badge: 'Most popular', features: [...], cta: 'Work with us' },
  ]}
  footnote="All prices in CHF, excl. VAT."
/>

Rules

Feature one tier — the one you want chosen.

Keep feature lists parallel in length across tiers.

Don't

Use more than three tiers — it overwhelms the choice.

Hide the price in the body — it's the headline.