# LandingHeader

> Eyebrow, chapter title, and lead copy that open a landing band.

```ts
import { LandingHeader } from "@sdxc/ui/landing";
```

Renders an optional eyebrow, a chapter-sized Heading from `children`,
and an optional lead paragraph. A mono eyebrow sits 0.5rem above the title and a
pill 1.5rem; the lead follows 1rem below; the band's body starts
`--ui-landing-header-space` after. The title renders at the enclosing band's
heading level: `<h2>` in a band on a bare page.

## Examples

```tsx
<LandingHeader eyebrow={t("badge")} description={t("lead")} align="center">
	{t("title")}
</LandingHeader>
```

```tsx
<LandingHeader eyebrow={t("chapter")} eyebrowVariant="numbered" eyebrowIndex="02">
	{t("title")}
</LandingHeader>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `eyebrow?` | `RemixNode` | Short label above the title. |
| `eyebrowVariant?` | `EyebrowVariant` | Eyebrow look. Defaults to DEFAULT_EYEBROW_VARIANT when an eyebrow is present. |
| `eyebrowHref?` | `string` | Turns the eyebrow into a link with a trailing arrow that nudges on hover. |
| `eyebrowIndex?` | `RemixNode` | Index a `numbered` eyebrow leads with, such as `"01"`. |
| `description?` | `RemixNode` | Supporting copy under the title; `<strong>` fragments draw in the heading ink. |
| `align?` | `"start" \| "center"` | Stack alignment. Defaults to DEFAULT_ALIGN; a split or an action aligns start. |
| `layout?` | `"stack" \| "split"` | Arrangement of title and lead. Defaults to `"stack"`. |
| `tone?` | `"default" \| "statement"` | Title ink. Defaults to `"default"`. |
| `subtitle?` | `RemixNode` | A second line at the title's size in the muted ink, inside the heading, so the two lines read as one two-tone heading. |
| `action?` | `RemixNode` | A control at the header row's inline end, such as a "See all" link, aligned to the title's last line; it wraps under the title when the row runs out of room. |
| `parts?` | `PartsProps` | Per-part styling for eyebrow, title, and description. |
| `children` | `RemixNode` | Title copy — rendered through Heading at chapter display size. |

Also accepts everything in `TagProps<"header">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Align` | `"start" \| "center"` | Whether the stack stretches start-aligned or centers as one statement. |
| `Layout` | `"stack" \| "split"` | `stack` sets the eyebrow, title and lead in one column. |
| `Tone` | `"default" \| "statement"` | `default` sets the whole title in the heading ink. |