# Setup Guide Cards block

> Emerald 5-step How It Works card grid with dot texture, lime corner glow and capability rows

Process section walking setup in numbered cards that reflow 1, 3 or 5 per row by container width, under an amber CTA, docs link and 2 capability rows. Composes shadcn Card steps, Item rows, Button and ReUI IconTile, Badge. For workflow, setup guide.

- Type: Pro block
- Category: [How It Works](https://web.dev.reui.io/blocks/marketing/how-it-works.md)
- Page: https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-3
- MCP: `get_block("how-it-works-3")`
- Built with: Badge, Button, Card, Icon Tile, Item
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A 5 step run of emerald cards with a dot texture and lime glow, under an amber button and 2 capability rows

## Agent notes

- The 5 steps are `HOW_IT_WORKS_STEPS` and the 2 capability rows beside the heading are `HOW_IT_WORKS_CAPABILITIES`
- Both header `Button` actions are anchors with a placeholder `href`; the step cards and capability rows have no link at all
- The emerald fill, dot grid, lime glow and amber CTA are fixed color classes in `className`, not theme tokens; recolor them for another brand

## When not to use

- Two processes compared side by side as numbered steps that end on a time cost: use [Old vs New](https://web.dev.reui.io/blocks/marketing/compare/compare-1.md) (`get_block("compare-1")`)
- A short 3 step explainer on a neutral card with no brand fill: use [Three-Step Explainer](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-1.md) (`get_block("how-it-works-1")`)

## Install

```bash
npx shadcn@latest add @reui/how-it-works-3
```

## About How It Works blocks

### When to use

- A landing page section that walks visitors through a product in 3 to 5 numbered steps
- A getting started explainer for a developer tool that sends readers on to its docs
- A product tour where picking a step swaps in a preview of the app screen it describes

### When not to use

- A bare grid of numbered steps to place under a heading and copy you already wrote: use the [Card blocks](https://web.dev.reui.io/blocks/application/card.md)
- A live overview page of KPI tiles, charts and tables wired to real data: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)
- The opening section of a landing page, with its main headline and signup action: use the [Hero blocks](https://web.dev.reui.io/blocks/marketing/hero.md)

### Agent notes

- The eyebrow `Badge`, `h2` headline and lede are written inline in `HowItWorks`, not in the data file; rewrite them there
- `HowItWorks` sets its own `py-12` padding, `max-w-7xl` width and `bg-background` fill; strip them inside a page that already pads its sections
- Step layouts reflow on the `@container` width set inside `HowItWorks`, not the viewport, so they follow the column the block sits in

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.