Contact

A question, a request, an idea? Write to us and we will get back to you quickly.

<PageHeader.Root background="muted">
	<PageHeader.Title>Contact</PageHeader.Title>
	<PageHeader.Lead>Write to us and we will get back to you quickly.</PageHeader.Lead>
</PageHeader.Root>

This is the quieter counterpart to LandingHero — no illustration, no actions, one background band.

API

PageHeader.Root

Prop	Type	Default
`background`	`"brand"` \| `"default"` \| `"gradient"` \| `"gradient-brand"` \| `"gradient-primary"` \| `"muted"`	`"gradient-primary"`	Surface behind the section. The three gradients read as brand moments — one per page is usually one enough. `brand` also flips the foreground to `primary-foreground`.
`containerSize`	`"full" \| "lg" \| "md" \| "sm" \| "xl"`	`"md"`	Width of the content column inside the band. Same sizes as `Container`.
`spacing`	`"lg" \| "md" \| "none" \| "sm" \| "xl"`	`"md"`	Vertical padding, which grows at `md` and up. `none` when the section supplies its own rhythm.
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus the DOM props of the element it renders. Source: landing/components/page-header/root.tsx.

PageHeader.Lead

Prop	Type	Default
`align`	`"center" \| "left" \| "right"`	—	Text alignment.
`size`	`"base" \| "lg" \| "sm" \| "xl" \| "xs"`	—	Type scale, independent of `variant` so a `muted` note can still be large.
`variant`	`"body" \| "lead" \| "muted"`	—	Role of the copy. `lead` is a standfirst under a heading, `muted` is secondary detail, `body` is everything else.
`weight`	`"bold" \| "medium" \| "normal" \| "semibold"`	—	Font weight. Prefer a heading over bold body copy when the text is actually a heading.
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus the DOM props of the element it renders. Source: landing/components/page-header/lead.tsx.

PageHeader.Title

Prop	Type	Default
`align`	`"center" \| "left" \| "right"`	—	Text alignment. `center` suits a section intro; anything longer than a line or two reads better left-aligned.
`level`	`HeadingLevel`	—	Sets both the rendered tag and the size scale (override the tag with `render`).
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus the DOM props of the element it renders. Source: landing/components/page-header/title.tsx.