Appearance
Blocks & page templates
Blocks and templates are the fastest way to start a page. A block is a pre-composed section — a hero, a pricing table, a footer — that drops onto your canvas already styled. A template is a whole page built from several blocks in order.
How they work
Every block is built to match your current theme. When you drop one, FlowRunner reads your palette, fonts, and spacing and produces a real, editable section — headings, buttons, and columns already coloured and sized correctly. Nothing is locked: once a block is on the canvas it's an ordinary node tree you can retext, restyle, rearrange, or delete piece by piece.
You'll find both in the Blocks tab of the right-hand pane:
- Start from a template — one click appends a full set of sections.
- Add a section — one click appends a single block to the bottom of the page.
TIP
Templates append their sections in order, so you can build a whole landing page in one click, then start a second template below it and delete the parts you don't need.
The 14 blocks
| Block | What it gives you |
|---|---|
| Hero | A centred headline, subheading, and two call-to-action buttons |
| Features | A three-column row of feature title + description |
| CTA | A bold headline and a single button on a primary-colour band |
| Header | A brand name with nav links and a Sign-up button, full-width |
| Footer | Centred nav links and a copyright line on a dark band |
| Pricing | Three pricing tiers (Starter / Pro / Business) with prices and buttons |
| Testimonials | Three customer quotes with attribution |
| FAQ | A narrow list of questions with answers |
| Stats | A row of headline numbers with labels (users, uptime, support) |
| Newsletter | A heading, blurb, and an email field with a Subscribe button |
| Gallery | A heading over a row of image placeholders |
| Team | Avatars with name and role for three people |
| Steps | A numbered three-step "how it works" row |
| Logos | A "trusted by" line over a row of logo placeholders |
Blocks that include images (Gallery, Logos) drop in with empty placeholders — select each Image and point it at an upload or URL.
The 4 page templates
Each template is an ordered composition of the blocks above:
| Template | Blocks, top to bottom |
|---|---|
| Landing page | Header → Hero → Features → Testimonials → CTA → Footer |
| About | Header → Hero → Stats → Footer |
| Contact | Header → Hero → Newsletter → Footer |
| Pricing | Header → Hero → Pricing → FAQ → CTA → Footer |
Customizing after you drop
Once a block is on the canvas, treat it like any other content:
- Edit text — click any heading or paragraph and type. Text on Typography supports inline rich formatting.
- Swap colours and spacing — select a node and adjust its theme references, or restyle the whole page at once from the theme.
- Rearrange — drag nodes on the canvas or in the outline, duplicate with ⌘D, or group a selection into a Stack with ⌘G.
- Reuse — if you tune a section you like, save it to your workspace library and drop it into other projects.
NOTE
Blocks reference theme tokens (like palette.primary) rather than hard-coded colours. That's why re-theming your page instantly restyles every block you've dropped — see Theme & styling.