# StatStrip

> A numeric proof strip for landing bands: each cell carries a value and a label supplied by the page, laid out as a responsive grid with ruled or gapped seams.

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

Lays StatStrip.Item children in two columns, then in one row from `lg`
(48rem) of its own width. The host is the sizing container and fills its parent,
and each cell sets its own text alignment, so a centring band never re-aligns labels.

## Examples

```tsx
<StatStrip>
	<StatStrip.Item label={t("stats.packages")}>42</StatStrip.Item>
	<StatStrip.Item label={t("stats.apps")}>12</StatStrip.Item>
</StatStrip>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `variant?` | `"ruled" \| "gap"` | Seam treatment. Defaults to DEFAULT_VARIANT. |
| `align?` | `"start" \| "center"` | Edge each figure and its label share, whatever text alignment the band around the strip sets. Defaults to DEFAULT_ALIGN. |
| `size?` | `"base" \| "display"` | Figure step. Defaults to DEFAULT_SIZE. |
| `children` | `RemixNode` | One or more StatStrip.Item cells. |

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


### StatStrip.Item

One proof cell: the figure as `children` in tabular digits, and what it counts as `label`, both on the strip's `align` edge.

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `RemixNode` | What the number counts — always supplied by the page. |
| `children` | `RemixNode` | The figure itself. |

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


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Variant` | `"ruled" \| "gap"` | How cells meet: a hairline between them, or a gap with no rule. |
| `Align` | `"start" \| "center"` | Edge each cell's figure and label share: `start`, or `center` for a strip in a centred band that should read centred too. |
| `Size` | `"base" \| "display"` | Figure step: `base` at 1.875rem, or `display`, a fluid 2.5–4.5rem numeral that scales with the strip's width for a strip that is the band's headline. |