# Onboarding Step Cards block

> Drifting isometric logo tiles topping 4 How It Works step cards in a 1, 2 or 4 column grid

Walks a product in 4 numbered steps, each card with a dark grid scene swept by a moving light and its own footer action, below docs and registry buttons and 2 shortcuts. Built on shadcn Card, Item, Button, ReUI Badge, IconTile. For onboarding.

- 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-2
- MCP: `get_block("how-it-works-2")`
- 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

Step cards topped by dark isometric scenes of drifting brand logo tiles, each with a Step badge and its own footer button

## Agent notes

- Copy lives in `HOW_IT_WORKS_STEPS` (badge `step`, footer `action`) and the 2 shortcuts in `HOW_IT_WORKS_HIGHLIGHTS`
- Each card scene draws a `TILE_SETS` entry chosen by step index, so a 5th step reuses the first set unless you add one
- The 2 header `Button` links and every card footer `Button` use a placeholder `href`; wire them to real routes

## When not to use

- A compact 3 step explainer ruled into one shared card, with no artwork: 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")`)
- A walkthrough where picking a step swaps in an animated mock app console: use [Vertical Demo Tabs](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-5.md) (`get_block("how-it-works-5")`)

## Install

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

## 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.