Blocks
Every page in XICflow is made of blocks: header area, heading, text, cards, prices, form. This chapter lists all 76 blocks with every setting they have. This overview starts with what applies to all of them — the reference itself is split across six parts.
What a block is
A block is a piece of page with a fixed job and a fixed list of settings.
In the editor you add blocks from the "Blocks" catalogue on the left; on the right, in the
"Properties" tab, you fill in their fields. Every block has a key — for example feature-grid — which means the same thing everywhere: in the editor, in the templates and in instructions
to the AI assistant.
What a block accepts is fixed. A field that is not in its table is unknown to it and is dropped when saving. That is why the tables in this chapter are complete: they show everything a block takes, and nothing beyond it.
If a block has several renderings, the "Layout" group appears at the top of the inspector. It
writes to the layout field, which you find again in the table of that block together with all of its possible values.
Section and content: which blocks belong together
Blocks do not simply stack — they form sections. That is what makes parts of a page look like one unit.
A page is made up of sections. A new section starts at a block of the section start category or at the very beginning of the page; every block of the inline category attaches to the section above it. Standalone blocks sit outside these sections and span the full width. Sections alternate between a plain and a slightly tinted background.
| Classification | Count | Meaning |
|---|---|---|
| Standalone | 6 | Spans the full width and brings its own background. |
| Section start | 22 | Opens a new section; the inline blocks that follow visually belong to it. |
| Inline | 42 | Attaches to the section above instead of starting a new one. |
| Chrome | 6 | Belongs to the header or footer area of the website, not to the page content. |
What we do
The heading opens the section. This text and the grid below attach to it instead of starting a section of their own.
Plan
First entry of the grid.
Build
Second entry, similar length.
Support
Third entry fills the row.
Blocks that open a section
Each of these blocks starts a new section. Everything that follows and does not open a section of its own belongs to it — up to the next entry from this list:
Heading, FAQ, Testimonials, Contact form, Form, Opening hours, Gallery, Video, Newsletter, Steps, Countdown, Stat cards, CTA split, Tabs, Disclosure, Pricing toggle, Testimonial slider, Ratings, Blog list, Phone band, Related posts, Related links.
Blocks across the full width
These blocks sit outside the sections and bring their own background: Hero, Metric band, CTA band, AI assistant demo, Columns, CMS list.
Order first, details later
If two blocks do not look like one unit although they should, there is usually a block in between that opens a new section. Move it in the "Structure" list before you start adjusting spacing.
Settings every block has
Besides their own fields, all blocks share the same styling settings. That is why they are not repeated in every table.
_style— Styling of the block: alignment, spacing, visibility per device and custom CSS.columnsByBp— Number of columns per screen size; without it the base setting of the block applies. This setting only exists on blocks that have the columns field.
The structure of _style is open — which of its entries actually take effect is decided by the rendering of each block.
In the inspector you reach these settings below the fields: under "Style", "Visible on"
decides which devices show the block (mobile, tablet, desktop). Under "Flow Design · Pro" you
set background, image crop, overlay, text colour, effects and animation. "Pro mode"
additionally opens the CSS details and can be pointed at a single element of the block — for
example only the card, image, icon, title, text, button or meta line.
Blocks with lists offer the same one level down: every entry can carry a _style of its own, so that a single card can be hidden on phones, for instance.
How to read the tables
On the parts pages every block has a table with all of its settings. The five columns always mean the same thing.
- Setting — the name of the
field. A dot separates subgroups (
cta.text), square brackets stand for a list:items[].titleis the "title" field in every entry of the "items" list. - Type — text, number, yes/no, choice, list or group. For "choice" the possible values are shown in the "Meaning" column.
- Required — whether the block needs the field. Optional fields may stay empty.
- Default — the value the field starts with. A dash means there is no default. The addition "(rendering)" means the value only takes effect when displaying, if you leave the field empty.
- Meaning — what the field is for.
Formatting in text fields
The same markup works in the text fields of the blocks as when editing in the preview:
==Text==— coloured accent in the brand colour**Text**— bold*Text*— italic`Text`— rendered as code[Text](/ziel/)— link; allowed are addresses with http, https, mailto and tel as well as targets starting with / or #- An empty line starts a new paragraph, a single line break stays a line break.
All blocks at a glance
The complete list, with 424 settings in total. The name leads to the full entry with its table.
| Block | Key | What for | Classification | Settings | Part |
|---|---|---|---|---|---|
| Hero | hero | Header area of a page with the H1, a short subline and up to two buttons. | Standalone | 12 | Basics |
| Metrics | stats-bar | Horizontal bar with a few key figures; prices do not belong here. | Inline | 5 | Basics |
| Heading | heading | Subheading that opens a new section of the page. | Section start | 3 | Basics |
| Text | paragraph | Body text for the main part of a page. | Inline | 1 | Basics |
| Feature grid | feature-grid | Grid of services or benefits, each with icon, title and text. | Inline | 6 | Basics |
| Price anchor | price-band | A single prominent price with benefit points and a button. | Inline | 11 | Basics |
| Service list | price-list | List of individual services with prices, in the style of a menu or treatment card. | Inline | 9 | Basics |
| FAQ | faq | Frequently asked questions with answers; the block also supplies the page FAQPage schema. | Section start | 3 | Basics |
| CTA | promo | Closing call to action; it is rendered in the footer area of the page. | Inline | 5 | Basics |
| Intro | intro | Highlighted introductory text at the start of a page or post. | Inline | 1 | Text and structure |
| Quote | quote | Highlighted quote with an attribution. | Inline | 2 | Text and structure |
| Highlight | highlight | Short, colour-highlighted text block for an important statement. | Inline | 2 | Text and structure |
| Key takeaways | key-takeaways | Box with the most important points in brief, mainly for blog posts. | Inline | 2 | Text and structure |
| List | list | Enumeration as bullets, numbers or a checklist. | Inline | 2 | Text and structure |
| Callout | callout | Coloured box for notes, tips or warnings. | Inline | 3 | Text and structure |
| Divider | divider | Horizontal line between two sections. | Inline | 2 | Text and structure |
| Code | code | Code block with a file header for technical content. | Inline | 3 | Text and structure |
| Terminal | terminal | Rendering of commands and their output like in a command line. | Inline | 4 | Text and structure |
| Image | image | Single image with an optional caption. | Inline | 3 | Text and structure |
| Columns | columns | Container that places other blocks next to each other in columns. | Standalone | 4 | Grids and cards |
| Icon cards | icon-cards | Cards with a large icon, short text and an optional link. | Inline | 8 | Grids and cards |
| Testimonials | testimonial | Customer voices as quote cards side by side. | Section start | 4 | Grids and cards |
| Testimonial slider | testimonial-slider | Customer voices one at a time, to page through. | Section start | 6 | Grids and cards |
| Fact band | fact-band | A single large statement with one highlighted figure. | Inline | 4 | Grids and cards |
| Trust badges | trust-badges | Row of short trust markers such as certificates or commitments. | Inline | 3 | Grids and cards |
| Logo wall | logo-wall | Bar of customer or partner logos as proof of trust. | Inline | 5 | Grids and cards |
| Team | team-grid | Introduction of the people behind the business with photo, role and short bio. | Inline | 8 | Grids and cards |
| Opening hours | opening-hours | Table of opening hours per weekday. | Section start | 5 | Grids and cards |
| Social links | social-links | Row of linked profile icons for social networks. | Inline | 6 | Grids and cards |
| Steps | steps | Numbered sequence of steps without interaction, for example for a procedure. | Section start | 5 | Grids and cards |
| Stat cards | stat-cards | Key figures as separate cards in a grid. | Section start | 7 | Grids and cards |
| Accordion | accordion | Expandable sections for arbitrary content; without FAQ markup. | Inline | 3 | Grids and cards |
| Disclosure | disclosure | Expandable entries for additional information; works without scripting. | Section start | 4 | Grids and cards |
| Tabs | content-tabs | Several text blocks behind tabs; without scripting the first tab is open. | Section start | 5 | Grids and cards |
| Timeline | timeline | Vertical timeline for a procedure or the history of the business. | Inline | 5 | Grids and cards |
| Process steps | process-steps | Procedure in steps, with clickable tabs on wide screens. | Inline | 4 | Grids and cards |
| Metric band | metric-band | Full-width band with several key figures that count up while scrolling. | Standalone | 8 | Grids and cards |
| Mini cases | mini-cases | Anonymised project stories following the pattern situation, action, result. | Inline | 7 | Grids and cards |
| Split feature | split-feature | Sections of text and visual panel, alternating left and right. | Inline | 9 | Grids and cards |
| Comparison cards | vs-cards | Two or more approaches as cards side by side, each with pros and cons. | Inline | 9 | Grids and cards |
| Feature tabs | feature-tabs | Large sets of features grouped into tabs. | Inline | 9 | Grids and cards |
| CTA band | cta-band | Full-width call to action in the middle of a page, with one or two buttons. | Standalone | 8 | Conversion and CTA |
| CTA split | cta-split | Call to action with text and buttons next to each other in one row. | Section start | 7 | Conversion and CTA |
| Announcement | announcement | Slim coloured bar for an announcement with an optional link. | Inline | 5 | Conversion and CTA |
| Countdown | countdown | Counter that runs down to a date live. | Section start | 4 | Conversion and CTA |
| Button | button | Single button in the middle of the content. | Inline | 3 | Conversion and CTA |
| Button group | buttons | Several buttons next to each other. | Inline | 4 | Conversion and CTA |
| Pricing table | pricing-table | Packages or plans side by side; this is where prices belong. | Inline | 16 | Conversion and CTA |
| Pricing toggle | pricing-toggle | Plans with a switch between monthly and yearly price. | Section start | 14 | Conversion and CTA |
| Phone band | phone-band | Band with a large phone number for calls as the main way to get in touch. | Section start | 8 | Conversion and CTA |
| Contact form | contact-form | Ready-made contact form; entries arrive as requests in your account. | Section start | 7 | Conversion and CTA |
| Form | form | Freely composed form; you define the fields yourself. | Section start | 12 | Conversion and CTA |
| Newsletter | newsletter | Slim newsletter sign-up; the sign-up arrives as a request in your account. | Section start | 5 | Conversion and CTA |
| Gallery | gallery | Image grid for work samples, rooms or products. | Section start | 10 | Media and showcase |
| Video | video-embed | Video on the page; externally hosted videos only open after a click. | Section start | 5 | Media and showcase |
| Downloads | download-cards | Cards with downloadable files such as price lists or fact sheets. | Inline | 8 | Media and showcase |
| Mockup | mockup | Framed screen mock-up built from your own HTML or SVG. | Inline | 5 | Media and showcase |
| Service area | area-map | Rendering of the service area with a list of towns, without an external map service. | Inline | 7 | Media and showcase |
| AI assistant demo | assistant-demo | Demonstration of the chat assistant directly on the page. | Standalone | 3 | Media and showcase |
| Before and after | before-after | Two images with a slider to show a result. | Inline | 8 | Media and showcase |
| Image with hotspots | image-hotspots | A photo in which individual spots are explained with markers. | Inline | 8 | Media and showcase |
| CMS list | collection-list | Lists the published entries of a custom content type. | Standalone | 5 | Content, blog and context |
| Blog list | blog-list | List of published blog posts with filter and pagination. | Section start | 5 | Content, blog and context |
| Table of contents | toc | Index of the sections; it is built automatically from the level 2 headings. | Inline | 0 | Content, blog and context |
| Post mockup | featured-mockup | Shows the graphic of the blog post; the content comes from the post itself. | Inline | 0 | Content, blog and context |
| Related posts | related-posts | Links to blog posts sharing tags; the selection is made at build time. | Section start | 1 | Content, blog and context |
| Related links | related-links | Collected links to other pages, either flat or in groups. | Section start | 15 | Content, blog and context |
| Comparison table | comparison | Table comparing several offers or variants. | Inline | 2 | Content, blog and context |
| Ratings | ratings | Star ratings with an overall score and individual reviews. | Section start | 13 | Content, blog and context |
| Legal links | footer-legal | The mandatory links in the footer. They come from the legal pages the site actually has, with translated labels and the right path per language. Typed by hand, the commonest mistake is a missing imprint — and it only surfaces when someone complains. | Chrome | 5 | Content, blog and context |
70 of the 83 blocks in the catalogue are listed; the number in the "Settings" column includes the fields inside lists and groups.