Hero

Full-width hero section with a heading, tagline, primary call-to-action link, and optional secondary link. Supports an eyebrow label and alternate surface styling.

Summary

The Hero component renders a <header> element containing a heading, tagline paragraph, and one or two call-to-action links. Use it as the opening section of a landing page or product homepage.

Why Use This Component?

Consistent hero layout across all pages without writing custom CSS.
Preset-aware — colors, typography, and spacing adapt to the active preset.
Flexible — optional eyebrow, secondary CTA, and surface variant cover common hero patterns.

Usage

Options

Prop	Type	Default	Description
`heading`	`ReactNode`	—	Main heading content. Required.
`tagline`	`string`	—	Supporting text below the heading. Required.
`ctaLabel`	`string`	—	Primary call-to-action button label. Required.
`ctaLink`	`string`	—	Primary call-to-action URL. Required.
`eyebrow`	`string \| undefined`	`undefined`	Small label above the heading.
`secondaryCtaLabel`	`string \| undefined`	`undefined`	Secondary button label. Both label and link must be set to render.
`secondaryCtaLink`	`string \| undefined`	`undefined`	Secondary button URL. Both label and link must be set to render.
`surface`	`'alt' \| undefined`	`undefined`	Set to `'alt'` to use the alternate surface background.

Troubleshooting

Secondary CTA not rendering — Both secondaryCtaLabel and secondaryCtaLink must be set. If either is undefined, the secondary button is hidden.
Eyebrow not visible — The eyebrow prop is optional. If not set, the space above the heading is omitted entirely.