# PricingBand

> Pricing band: a LandingHeader over a grid of plan cards, each with a price, a checked feature list and an action.

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

Renders a pricing band with a chapter header and a plan grid of one column on a phone, an
even count paired from the `md` container, and `columns` from `lg`, evened per plan count
with a short last row centred. Each card pushes its action to the foot, so actions in one row line up.

## Examples

```tsx
<PricingBand title={t("pricing.title")}>
	<PricingBand.Plan name="Team" price="$29" period="/month" featured action={cta} />
</PricingBand>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `columns?` | `Columns` | Plans per row from the `lg` container. Defaults to DEFAULT_COLUMNS. |
| `tone?` | `Tone` | Band fill. Defaults to DEFAULT_TONE. |
| `eyebrow?` | `RemixNode` | Optional eyebrow above the title. |
| `title` | `RemixNode` | Section title — required, always supplied by the page. |
| `description?` | `RemixNode` | Supporting lead under the title. |
| `children` | `RemixNode` | One PricingBand.Plan per plan, in reading order for wide layouts. |
| `parts?` | `PartsProps` | Per-part styling for title, lead, and plan grid. |

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


### PricingBand.Plan

One plan card: name and badge, price with its period, a one-line pitch, the checked features, and the action at the foot.

| Prop | Type | Description |
| --- | --- | --- |
| `name` | `RemixNode` | Plan name, rendered as the card's heading one level below the band title. |
| `price` | `RemixNode` | The amount, drawn large in tabular figures (`"$29"`, `"Free"`). |
| `period?` | `RemixNode` | Billing period beside the amount, drawn muted (`"/month"`). |
| `description?` | `RemixNode` | One line on who the plan is for. |
| `features?` | `RemixNode` | CheckRow items; the card lays them in a CheckList. |
| `action` | `RemixNode` | The plan's call to action, stretched across the card's foot. Its button or link takes the landing CTA radius, weight and edge; leave `size` at the 40px default. |
| `featured?` | `boolean` | Inverts the card, lifts it, and moves it first while plans stack. |
| `badge?` | `RemixNode` | A short label beside the name, such as "Most popular". |

Also accepts everything in `Omit<TagProps<"div">, "children">`.