# Steps and blocks reference (https://www.getfounderhq.com/docs/journeys/steps-and-blocks-reference)

Every Journey is a list of screens. Each screen has a type. One type,
`info_page`, is built from blocks — the smaller pieces you stack to make a
screen say what you want.

## Screen types

Each screen stores its answer under the screen's variable.

| Type | What the person does | Answer shape |
| --- | --- | --- |
| `single_select` | Picks one option from a list. Can advance on tap. | The option ID |
| `multi_select` | Picks any number of options from a list. | A list of option IDs |
| `input` | Fills one or more fields. Each field is text, email, number, or tel. | A value per field |
| `slider` | Drags a slider between a minimum and a maximum. | A number |
| `swipe_cards` | Swipes through a stack of cards, yes or no on each. | `yes` or `no` per card |
| `counter_select` | Sets a count on each option with plus and minus. | A count per option |
| `info_page` | Reads. No question — this screen is made of blocks. | None |

Every screen also supports a heading, a description, validation, a
background, and routing rules that pick the next screen from the answers so
far.

## Blocks

Blocks fill an `info_page`. Three of them collect an answer:
`single_select`, `multi_select`, and `pricing_plans`. The rest present
content.

### Text and layout

| Block | What it shows |
| --- | --- |
| `heading` | Title or heading text |
| `text` | Body text paragraph |
| `decorated_text` | Rich text with an optional image on the left or right |
| `list` | Bulleted or numbered list |
| `quote` | Quote card with author, role, and optional star rating |
| `callout` | Highlighted info, warning, success, or tip box |
| `card` | Styled container with icon, title, and description |
| `columns` | Side-by-side layout holding other blocks |
| `spacer` | Vertical space between blocks |
| `divider` | Horizontal line separator |
| `floating_label` | Small label that pins to the top while the page scrolls |
| `badge` | Small label pill |
| `icon` | Icon or emoji |

### Media

| Block | What it shows |
| --- | --- |
| `image` | Image or illustration |
| `video` | HTML5 video, or a YouTube or Vimeo embed |
| `lottie` | Animated illustration from a Lottie file |
| `carousel` | Swipeable slide deck |
| `device_frame` | Phone mockup wrapping a screenshot or a video |
| `avatar_group` | Overlapping row of avatars with an optional overflow count |

### Numbers and charts

| Block | What it shows |
| --- | --- |
| `stat` | Large number with a label |
| `metric` | Stat card with an animated counter, label, and accent |
| `counter` | Number that counts up from zero |
| `progress_bar` | Horizontal progress indicator |
| `circular_progress` | Circular progress indicator with multiple segments |
| `comparison_bar` | Vertical bar chart for comparisons |
| `line_chart` | Line chart with one or more series |
| `table` | Comparison table with check, cross, lock, warning, icon, or text cells |
| `gravity_bin` | Icons that fall and pile up with simulated gravity |

### Sequence and motion

| Block | What it shows |
| --- | --- |
| `timeline` | Vertical timeline with a connecting line and content nodes |
| `checklist` | Checkbox list that ticks itself in sequence |
| `accordion` | Expandable FAQ-style sections |
| `feature_row` | Icon on the left, title and text on the right |
| `before_after` | Split, stacked, or swipeable comparison of two states |
| `notification_stack` | Mock push notifications sliding in one after another |

### Action and answer

| Block | What it does |
| --- | --- |
| `button` | Runs an action: next, back, skip, open a link, start a purchase, or open the discount-code box |
| `single_select` | Pick-one option group; stores the choice in a variable |
| `multi_select` | Pick-many option group; stores the choices in a variable |
| `pricing_plans` | Selectable plans in featured, minimal, or comparison style; the selection drives the `purchase_intent` event |

## Templates

Any text field can reference an answer with `${...}`.

```
You picked ${goal}, so we'll start there.
```

The same syntax reaches into a selected plan:

```
You're subscribing to ${selectedPlan.name} — ${selectedPlan.amount} ${selectedPlan.currency}/${selectedPlan.period}.
```

Available plan paths: `id`, `name`, `amount`, `currency`, `period`,
`originalAmount`, `perUnitLabel`, `display`, `trialDays`, `introOffer`,
`description`, `badge`, `icon`, `features`, and `metadata`.

Templates and computed variables run in a restricted expression language.
It reads properties and array items, does arithmetic and comparisons, and
allows common string and array helpers plus `Math`. It never runs arbitrary
JavaScript, and never runs code supplied through Journey data.