CTASection

Call-to-action band used on marketing pages.

Status: stable. Group: marketing. Markdown version: /design-system/components/cta-section.md

When to use

CTASection is the closing call-to-action band for marketing pages: a title, supporting description and primary/secondary action slots over a background variant. It sits between content sections and the footer (HomePage, AboutPageContent and WorkCTA all mount it). The id prop also forms the heading id (${id}-title) that names the section; when it is omitted a unique id is generated, so several CTASections on one page never share ids. background="dark" is built from the --color-black and --color-white tokens, and descriptions on the primary, gradient and dark bands use the band text colour at 80%. For mid-page emphasis with an overline, use HighlightSection instead.

When not to use

The contract records no forbidden uses.

Look-alikes

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

Props

CTASection props
Prop	Type	Default	Description	Required
`title`	`string`	none	Main headline.	Yes
`description`	`string`	none	Supporting description.	No
`primaryAction`	`ActionItem`	none	Primary action button.	Yes
`secondaryAction`	`ActionItem`	none	Secondary action button.	No
`background`	`"primary" \| "muted" \| "dark" \| "gradient" \| "brand"`	`primary`	Background style. Defaults to "primary". Also sets the button surface: onBrand for brand, onDark for primary, gradient and dark, default for muted. "dark" is built from the --color-black and --color-white tokens.	No
`align`	`"center" \| "left"`	`center`	Text alignment. Defaults to "center".	No
`className`	`string`	none	Custom className.	No
`id`	`string`	none	Section id for navigation; the heading id is derived from it as `${id}-title`. When omitted, a unique id is generated so several CTASections on one page never share section or heading ids.	No
`donnyTarget`	`string`	none	Donny site action target id.	No

Variants

Allowed align values: center, left (default center).
Available backgrounds: primary, muted, dark, gradient, brand (default primary).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

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

CTASection rules
Level	Rule	How it is checked
MUST	ARIA: The root <section> is named by its h2 through aria-labelledby; the heading id is `${id}-title`, so ids must be unique per page.	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	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
MUST NOT	Maintainers: Do not bypass design tokens or skip forced-colors verification at beta.	Release review; not machine-checked.

Install and import

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