PricingPageContent

Full pricing page assembly: hero, agency comparison, testimonial, PricingCalculator, deliverables, package tiers, AaaS packages, billing details, Reliable Partner row and procurement FAQ.

Status: stable. Group: marketing. Markdown version: /design-system/components/pricing-page-content.md

When to use

PricingPageContent assembles the whole pricing page: a full-bleed hero with #calculator and #packages buttons, the agency comparison (two columns, each a heading plus a list; not a table), a testimonial band, PricingCalculator (reads its selection from the URL), deliverables, package tiers, an AaaS package group, billing details with copy-to-clipboard buttons, a Reliable Partner trust row and ProcurementFaq. Package CTAs deep-link to /contact?mode=book&package=<id>, which the contact page reads to prefill the booking tab; a package that defines ctaHref links there instead. Mount once per /pricing route; for a single inline pricing card elsewhere, compose atoms instead.

When not to use

Do not embed single package card without page context.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

PricingPageContent props
Prop	Type	Default	Description	Required
`className`	`string`	none	Optional wrapper class.	No
`heroBackground`	`ReactNode`	none	Decorative layer on the hero field, under the text. Drags on it pass through the text layer.	No

Variants

No variant dimensions and no props with a fixed set of values.

Invalid combinations

The contract records no invalid combinations.

Keyboard

PricingPageContent keyboard behaviour
Key	Behaviour
Tab	Moves focus to the control and on to the next focusable element. (standard)
Enter	Activates the focused control. (standard)

Rows marked (standard) name a key the contract lists without a description; the behaviour shown is the usual one for that key.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

PricingPageContent rules
Level	Rule	How it is checked
MUST	ARIA: Heading hierarchy for package tiers.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Agency comparison is a section named by aria-label holding two columns, each an h2 plus a <ul>; it is not table markup.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: CTA links route to contact with package prefill.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Billing copy buttons announce the copied confirmation through a polite aria-live region; their icons are decorative.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Every documented keyboard interaction works as specified.	Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
SHOULD	Let package CTAs carry the package query param (/contact?mode=book&package=<id>); the contact page reads it to preselect the booking package.	Not stated in the contract.
SHOULD NOT	Don't embed it for a single homepage pricing card; compose Card/Text/Button directly.	Not stated in the contract.

Install and import

In-repo only. PricingPageContent is not exported from @digitaltableteur/react, so there is no public import path.