# FeatureBand

> Mid-page feature band: a LandingHeader plus a Split, a Feature.Grid, a numbered or timeline StepList, or a vertical TabbedStage, selected by `layout`.

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

Renders a feature band with a chapter header and a split, grid, steps, timeline,
or stage body. A split with media carries its header in the copy column, so copy and
media share one grid; cell and step titles sit one heading level under the band title.

## Examples

```tsx
<FeatureBand layout="split" title={t("f1.title")} description={t("f1.lead")} media={shot}>
	<ul><li>{t("f1.claim")}</li></ul>
</FeatureBand>
```

```tsx
<FeatureBand layout="stage" id="how" title={t("how.title")}>
	<TabbedStage.Item value="detect" label={t("how.detect")} defaultChecked>{shot}</TabbedStage.Item>
</FeatureBand>
```

```tsx
<FeatureBand layout="timeline" title={t("incident.title")}>
	<StepList.Item meta="14:02 UTC" title={t("incident.detect")}>{t("incident.body")}</StepList.Item>
</FeatureBand>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `layout?` | `"split" \| "grid" \| "steps" \| "stage" \| "timeline"` | Body layout. Defaults to DEFAULT_LAYOUT. |
| `tone?` | `Tone` | Band fill. Defaults to DEFAULT_TONE. |
| `eyebrow?` | `RemixNode` | Optional eyebrow above the title. |
| `eyebrowVariant?` | `LandingHeader.EyebrowVariant` | Eyebrow chrome forwarded to LandingHeader. |
| `eyebrowHref?` | `string` | Turns the eyebrow into a link to this URL, forwarded to LandingHeader. |
| `eyebrowIndex?` | `RemixNode` | Index a `numbered` eyebrow leads with, such as `"02"`. |
| `title` | `RemixNode` | Section title — required, always supplied by the page. |
| `description?` | `RemixNode` | Supporting lead under the title. |
| `media?` | `RemixNode` | Media for `layout="split"`. Every other layout carries its media in its items. |
| `lean?` | `Split.Lean` | Which column is wider when `layout="split"`. |
| `columns?` | `Feature.Columns` | Grid column count when `layout="grid"`. |
| `gridVariant?` | `Feature.GridVariant` | Grid chrome when `layout="grid"`: `cards`, `mosaic` or an un-carded `list`. |
| `stageName?` | `string` | Radio group name for `layout="stage"`. Defaults to `"<id>-stage"` when the band has an `id`, else DEFAULT_STAGE_NAME; give every stage band on a page its own `id` or `stageName` so their selections stay independent. |
| `stageLabel?` | `string` | Accessible name for the stage when `layout="stage"`. Defaults to the title when the title is a string; pass it whenever the title is markup. |
| `children?` | `RemixNode` | Body content: claim list / copy for `"split"`, Feature cells for `"grid"`, StepList.Item children for `"steps"` and `"timeline"`, or TabbedStage.Item children for `"stage"`. |
| `parts?` | `PartsProps` | Per-part styling for title, lead, and media. |

Also accepts everything in `Omit<
		LandingSection.Props,
		"children" | "tone" | "title" | "parts"
	>`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Layout` | `"split" \| "grid" \| "steps" \| "stage" \| "timeline"` | How the band body lays out under the header. |