HomeHero

Homepage hero with kinetic title, background, and primary CTA.

Status: stable. Group: marketing. Markdown version: /design-system/components/home-hero.md

When to use

HomeHero is the bespoke landing hero for the homepage: a kinetic headline randomized per visit, background treatment, and CTAs to Contact and About. Copy and variants live inside the component by design; it is not a configurable hero. For prop-driven heroes on other routes use Hero, or HeroSection for a bare shell.

When not to use

The contract records no forbidden uses.

Look-alikes

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

Props

HomeHero props
Prop	Type	Default	Description	Required
`className`	`string`	none	Custom className for styling.	No
`background`	`ReactNode`	none	Replaces the default animated gradient behind the content. Drags on the background pass through the content layer; only the buttons capture them.	No

Variants

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

Invalid combinations

The contract records no invalid combinations.

Keyboard

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

HomeHero rules
Level	Rule	How it is checked
MUST	ARIA: The root is HeroSection's section landmark, named by the translated homeHeroAriaLabel ("Homepage hero section")	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The h1, the subtitle and both CTA links are static content with no live region: the title and subtitle are picked once per page load, so nothing is re-announced after hydration.	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.
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. HomeHero is not exported from @digitaltableteur/react, so there is no public import path.