PurchaseCard

course · static (no JavaScript) · no children. All components: component playground.

Description for the model

Sticky side card with the price, what is included and the start button.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "PurchaseCard",
  "props": {
    "price": "49 EUR",
    "priceNote": "one-off",
    "title": "Get the course",
    "items": [
      "Lifetime access",
      "Certificate"
    ],
    "cta": {
      "label": "Buy now",
      "href": "/checkout/1"
    },
    "note": "14-day refund."
  }
}

Props

Prop	Type	Required	Notes
price	string		Formatted price. max length 20
priceNote	string		e.g. one-off payment. max length 60
title	string		Card title. max length 80
items	array of string		What is included. max 8 items
cta	object	yes	A link or call to action
cta.label	string	yes	Visible text. max length 80
cta.href	string (href)	yes	Target URL. max length 2048
note	string		Small print. max length 200
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Get the course
49 EUR

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "cta": {
    "label": "Buy",
    "href": "data:text/html,x"
  }
}

Issues:

• /cta/href unsafe or empty link

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 17 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.