# StepList

> Landing steps for a “how it works” band: numbered columns, or a timeline that walks one story down a rule with a timestamp and product media per step.

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

Lays steps in a responsive track. A sizing wrapper is the named container; the `<ol>`
holds the grid so the query can restyle a descendant. A numbered list sets every step in
one row from `xl` (64rem) with connectors between them; a timeline stays one column.

## Examples

```tsx
<StepList>
	<StepList.Item title={t("step.one")}>{t("step.one.body")}</StepList.Item>
</StepList>
```

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

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `variant?` | `"numbered" \| "timeline"` | List look. Defaults to DEFAULT_VARIANT. |
| `children` | `RemixNode` | StepList.Item children, numbered by CSS counters. |

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


### StepList.Item

One step.

| Prop | Type | Description |
| --- | --- | --- |
| `title` | `RemixNode` | Step title — rendered at the ambient heading depth. |
| `meta?` | `RemixNode` | Line above the title in a timeline, such as a timestamp. A numbered list leaves it out. |
| `media?` | `RemixNode` | Rendered UI beside the copy from the `lg` container up and under it below, in a timeline. A numbered list leaves it out. |
| `children` | `RemixNode` | Supporting copy under the title; `<strong>` fragments draw in the heading ink. |

Also accepts everything in `Omit<TagProps<"li">, "title">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Variant` | `"numbered" \| "timeline"` | `numbered` lays steps in counted columns; `timeline` runs them down a rule with a square marker each, an optional timestamp line and optional media. |