# NextSteps

> The hand-written "Next steps" block that ends a guide: two to four links, each with one line on what it gets the reader, drawn as cards or as a list.

```ts
import { NextSteps } from "@sdxc/ui/docs";
```

Renders the titled block, named by its heading. The heading takes `level`, else the
ambient `HeadingScope` level, else `<h2>`; each item is one whole-card or whole-row link.

## Examples

```tsx
<NextSteps title="Next steps" id="next-steps" items={[{ title: "Add alerts", href: "/docs/alerts", description: "Page the right person." }]} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `title` | `string` |  |
| `id?` | `string` | Id of the heading, so a table of contents can link to the block. |
| `level?` | `HeadingLevel` | Heading level; defaults to the ambient `HeadingScope` level, else DEFAULT_LEVEL. |
| `items` | `Item[]` | Two to four destinations, in the order a reader should consider them. |
| `variant?` | `"cards" \| "list"` | Defaults to DEFAULT_VARIANT. |

Also accepts everything in `Omit<TagProps<"section">, "children" | "title" | "id">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Variant` | `"cards" \| "list"` | `cards` tiles the links in an auto-fitting grid; `list` runs them down a ruled list. |