Pricing

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

Description for the model

Plans side by side. Prices come preformatted from the data model (products); never invent a price.

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": "Pricing",
  "props": {
    "id": "pricing",
    "eyebrow": "Pricing",
    "title": "Choose a plan",
    "plans": [
      {
        "name": "Free",
        "price": "0",
        "period": "forever",
        "description": "Preview lessons.",
        "items": [
          "3 lessons",
          "Community forum"
        ],
        "cta": {
          "label": "Start free",
          "href": "/signup"
        }
      },
      {
        "name": "Pro",
        "price": "19",
        "period": "per month",
        "description": "Everything.",
        "items": [
          "All courses",
          "Certificates"
        ],
        "highlighted": true,
        "cta": {
          "label": "Go Pro",
          "href": "/buy/pro"
        }
      }
    ],
    "note": "Prices include VAT."
  }
}

Props

Prop	Type	Required	Notes
id	string		Anchor id. max length 40, default "pricing"
eyebrow	string		Small label above the title. max length 80
title	string		Section title. max length 160
intro	string		One or two sentences under the title. max length 600
plans	array of objects	yes	Plans. min 1 items, max 4 items
plans[].name	string	yes	Plan name. max length 80
plans[].label	string		Small label above the name. max length 40
plans[].price	string		Formatted price, e.g. €89. max length 20
plans[].period	string		e.g. one-off, per month. max length 30
plans[].description	string		One sentence. max length 300
plans[].items	array of string		What is included. max 10 items
plans[].cta	object		A link or call to action
plans[].cta.label	string	yes	Visible text. max length 80
plans[].cta.href	string (href)	yes	Target URL. max length 2048
plans[].highlighted	boolean		Visually recommended plan. default false
note	string		Small print under the plans. max length 200

Text fallback

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

Choose a plan
Free
Pro

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).

{
  "plans": "free"
}

Issues:

• /plans expected array, got string

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 21 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.