# Feature

> One landing claim cell — icon, media, title, description, an optional link pinned to its foot — and an optional Feature.Grid that lays cells as separate cards or a hairline mosaic via container queries.

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

Renders one claim cell. Compose Feature.Media, Feature.Icon,
Feature.Title, Feature.Description, and
Feature.Action inside it.

## Examples

```tsx
<Feature>
	<Feature.Icon><ZapIcon size={18} aria-hidden="true" /></Feature.Icon>
	<Feature.Title>{t("feature.title")}</Feature.Title>
	<Feature.Description>{t("feature.body")}</Feature.Description>
</Feature>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `span?` | `2 \| 3` | Tracks the cell spans from the grid's widest step, for a grid of mixed spans; it spans the whole row where the grid has fewer tracks. Name the grid's outer corners with `data-corner` on the cells that hold them. |
| `variant?` | `"plain" \| "panel"` | Cell chrome. Defaults to DEFAULT_VARIANT. |
| `href?` | `string` | Destination for the claim, exposed as `data-href`; the navigation itself is a Feature.Link inside Feature.Action, which makes the cell its hit target. |
| `children` | `RemixNode` | Compound parts: Feature.Media, Feature.Icon, Feature.Title, Feature.Description, Feature.Action, or other content. |

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


### Feature.Icon

Glyph tile that leads the claim, quiet by default.

| Prop | Type | Description |
| --- | --- | --- |
| `tone?` | `"quiet" \| "brand"` | Tile chrome. Defaults to DEFAULT_ICON_TONE. |
| `children` | `RemixNode` | Glyph rendered inside the tile. |

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


### Feature.Media

Illustration at the top of the cell, bleeding past the cell padding and fading into the fill; hidden below the `md` container.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Illustration or screenshot drawn edge to edge at the top of the cell. |

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


### Feature.Title

Claim title at the ambient heading depth, sized for a feature cell.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Title copy for the claim. |

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


### Feature.Description

Supporting copy under the claim title, with emphasis fragments in the heading ink.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Supporting copy for the claim; `<strong>` fragments render in the heading ink. |

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


### Feature.Action

Trailing action slot for a link or button under the claim body, pinned to the foot of the cell so the actions of cells sharing a grid row line up however long each claim's copy runs.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Trailing link or button chrome for the claim. |

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


### Feature.Link

Quiet brand-coloured link with a trailing arrow, for a Feature.Action.

Takes no props of its own.

### Feature.Grid

Grid of Feature cells, as separate cards by default.

| Prop | Type | Description |
| --- | --- | --- |
| `columns?` | `Columns` | Columns at the `lg` container. Defaults to DEFAULT_COLUMNS. |
| `variant?` | `"cards" \| "mosaic" \| "list"` | Grid chrome. Defaults to DEFAULT_GRID_VARIANT. |
| `children` | `RemixNode` | Feature cells to lay out. |

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


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Variant` | `"plain" \| "panel"` | Cell chrome: a light claim with no fill, or a panel when the cell itself is the interaction surface. |
| `GridVariant` | `"cards" \| "mosaic" \| "list"` | Grid chrome: separate raised `cards` with larger outer corners, one `mosaic` box whose 1px gaps draw hairlines between flush cells, or an un-carded `list` whose cells set the icon beside the title and copy. |
| `IconTone` | `"quiet" \| "brand"` | Glyph tile: a `quiet` hairline ring in the heading ink, or a `brand` tinted and bordered badge. |