Process
Process Cards
Steps as cards of two boxes with progress dots, in a row of four or two by two beside a title and a photo with a call to action.
Layout and motion from the Balancee template — see it in contextTry it in the page builderBlocks come with Pro
Preview every block now, in any theme and at any width. The source, the install command and the AI prompt unlock when Pro opens, once the catalog reaches 20 templates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | "row" | "grid" | "row" | row: four steps in a row under the title. grid: from 1024px the title and a photo with a pill at the left, the steps two by two beside them. |
| label / title / lead | string | — | The title block. |
| steps | { title, promise?, text }[] | 4 steps | Numbered by position; each card shows one dot per step, the ones up to it full and the rest at half. |
| image | { src, alt } | — | layout="grid": the photo under the title. |
| action | { text, label, href } | — | layout="grid": a pill at the photo's foot — a line beside a small button. |
| buttonStyle | "spring" | "flip" | "sweep" | "spring" | The look of the pill's button. |
| className | string | — | Classes for the <section>. |
- A card is two boxes 5px apart on the muted surface, 400px tall from 1024px; a step without a promise shows its text alone. Static: no motion besides the button's.
