Marketing Sections

Pricing Stack

A membership card in the Forever ink-and-emerald register. A monthly/annual switch rolls between £5/month and £50/year. Selecting a plan records a local choice and emits ps08:select; this demo has no checkout. Preview flips stop on input.

csslight complexitysubtle motionclickmobile-ready

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →

When to use it

Pricing sections and upgrade prompts for subscription products; single-plan offers with a billing-period choice.

When not to

Multi-tier comparison tables, or products without a billing-period choice.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit prices, feats, set() period labels and FLIP=3600. Handle ps08:select to connect checkout. Light tokens: --pro-bg:#fafaf8; --pro-surface:#f4f4f0; --pro-border:rgba(0,0,0,.08); --pro-text:#1a1a18; --pro-muted:#6b6b66; --pro-accent:#1a7a50. Update catalog bg if default changes. ?theme=light and forever:theme switch palette.

Safe to edit

theme tokens (:root --pro-bg, --pro-surface, --pro-border, --pro-text, --pro-muted, --pro-accent)
prices (.ps08-roll spans) and period labels in set()
feats array (feature list) and the note text
demo cadence (FLIP) and the roll/draw durations (.5s roll, .4s checks)
button + fine-print copy

Keep intact

:root --pro-* token block (renaming breaks the shared pro theming API)
role=switch + aria-checked on the segmented control (keyboard: space / enter)
IIFE wrapper
list built from the feats array
prefers-reduced-motion guard (monthly card, checks drawn, switch still works)
visibilitychange pause
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
demo-v1: initialize from window.__foreverPreview; stop attract work on forever:interactive; keep manual actions and cleanup

Known limitations

Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
Prices are static copy — no currency formatting or tax logic
Selection stays in card.ps08Selection and emits ps08:select; this demo has no checkout or billing
The demo flip is for the wall; set demo=false in a product
State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

pricingsalesmembershipplantoggleswitchodometerchecklistconversion

More Marketing Sections components

Logo Wall MarqueeA 'Trusted by teams at' social-proof section: two rows of invented, purely geometric company marks on chips, marqueeing in opposite directions on a…
CTA BannerA centered call-to-action band on a slowly shifting amber-to-tan gradient, with a rotating eyebrow tag, a bold headline, a subline, a white primary button…
Hairline CTAA calm call-to-action card: a hairline frame traced by one slow running dash, a mono eyebrow with a heartbeat dot cycling quiet facts, a lowercase…
Agent Handoff CTAA two-register call to action: the human side carries a lowercase headline, a subline and one accent button; the machine side is a mono bundle (id,…
Founding OfferA founding-member offer card: '£399, once', a short subline, a seat meter (hairline track, accent fill with a slow travelling highlight, ten ticks, a…
Availability SignalA parchment card stating availability plainly: a display figure of free slots (Pompeii when scarce), six engraved slot marks, a lede and an 'Ask about a…