On this page

Overview
Hero
Metrics
Heading
Text
Feature grid
Price anchor
Price list
FAQ
CTA

Blocks: basics

The nine blocks most pages are built from: header area, metrics, heading, text, services, prices, questions and the call to action. For each of them you find every setting here with its type, whether it is required and its default.

Overview

The blocks nearly every page is built from: header area, headings, text, services, prices and questions.

In the editor these blocks sit at the very top of the left column under "Basics" — the category is already open when you arrive. A typical home page is made of hero, feature grid, metrics, prices, FAQ and CTA in that order.

How to read the tables and which settings every block has on top of its own is explained on the chapter overview.

Hero `hero`

Header area of a page with the H1, a short subline and up to two buttons.

The headline of the first hero on a page becomes the H1 — the most important heading for search engines and screen readers. Any further hero on the same page looks identical but counts one level lower.

In the editor: Basics
Page structure: Standalone
Settings: 19

All settings of the Hero block
Setting	Type	Required	Default	Meaning
`headline`	Text	Required	no default	The H1 of the page; ==text== sets a coloured accent.
`eyebrow`	Text	optional	no default	Small line above the headline naming the trade and the location.
`subline`	Text	optional	no default	One sentence below the headline.
`facts`	List of entries	optional	no default	Up to three hard facts shown as a card next to the text.
`facts[].value`	Text	Required	no default	The fact itself, for example a quantity or an opening time.
`facts[].label`	Text	optional	no default	One line of explanation below the fact.
`facts[].icon`	Text	optional	no default	Name of the icon; unknown names fall back to a default icon.
`badges`	List of texts	optional	empty	Short keywords rendered as chips in the hero.
`cta`	Group	optional	no default	Primary button of the hero.
`cta.text`	Text	Required	no default	Label of the button.
`cta.url`	Text	Required	no default	Target of the button as a path or full address.
`secondaryCta`	Group	optional	no default	Second, less prominent button.
`secondaryCta.text`	Text	Required	no default	Label of the button.
`secondaryCta.url`	Text	Required	no default	Target of the button as a path or full address.
`layout`	Choice	optional	no default	Hero arrangement: classic, centered, compact (flatter) or bild-neben (framed image beside the text instead of full-bleed behind it). Possible values: classic, centered, compact, bild-neben
`image`	Text	optional	no default	Background image; without one the hero renders the theme animation.
`imageAlt`	Text	optional	no default	Alternative text, only needed if the image carries a message of its own.
`focalX`	Number	optional	no default	Horizontal image focus in percent: 0 left edge, 50 centre, 100 right edge. Only set it when the crop cuts into the subject. Value range: 0–100
`focalY`	Number	optional	no default	Vertical image focus in percent: 0 top, 50 centre, 100 bottom. For portraits often 30, so the head stays in frame. Value range: 0–100

On top of these come the common settings _style.

Metrics `stats-bar`

Horizontal bar with a few key figures; prices do not belong here.

In the editor: Basics
Page structure: Inline
Settings: 5

Three metrics as example content in the "band" layout. The value is large, the unit behind it comes from "suffix".

All settings of the Metrics block
Setting	Type	Required	Default	Meaning
`layout`	Choice	optional	no default	Presentation: band (connected), cards (separate cards) or plain. Possible values: band, cards, plain
`items`	List of entries	Required	empty	The key figures in display order.
`items[].value`	Text	Required	no default	The value of the figure.
`items[].suffix`	Text	optional	no default	Characters after the value, for example a percent sign.
`items[].label`	Text	Required	no default	Label below the value.

On top of these come the common settings _style.

Heading `heading`

Subheading that opens a new section of the page.

In the editor: Basics
Page structure: Section start
Settings: 4

Our workshop

A level 3 heading with a coloured accent set by ==text==.

All settings of the Heading block
Setting	Type	Required	Default	Meaning
`text`	Text	Required	no default	The text of the heading.
`eyebrow`	Text	optional	empty (rendering)	Small line above the heading, one to three words naming the topic of the section.
`level`	Choice	optional	`2`	Rank of the heading; level 2 appears in the table of contents. Possible values: 2, 3, 4
`id`	Text	optional	no default	Anchor of the heading; without it the anchor is derived from the text.

On top of these come the common settings _style.

Text `paragraph`

Body text for the main part of a page.

In the editor: Basics
Page structure: Inline
Settings: 1

Body text for the main part of a page. An empty line in the field starts a new paragraph, bold and italic work just as well as a link.

A text block with markup in the "text" field.

All settings of the Text block
Setting	Type	Required	Default	Meaning
`text`	Text	Required	no default	The body text; Markdown is allowed.

On top of these come the common settings _style.

Feature grid `feature-grid`

Grid of services or benefits, each with icon, title and text.

From two filled cards upwards it additionally produces a machine-readable list for search engines.

In the editor: Basics
Page structure: Inline
Settings: 12

Repair

One or two sentences on the service.

Maintenance

Similar lengths look calmest.

Emergencies

Three cards fill the row.

Three services as cards. "layout" switches between cards, minimal and centred.

All settings of the Feature grid block
Setting	Type	Required	Default	Meaning
`columns`	Choice	optional	`3`	Number of columns; the number of entries should match it. Possible values: 2, 3, 4
`layout`	Choice	optional	no default	Presentation: cards, minimal (without frames) or centered. Possible values: cards, minimal, centered
`items`	List of entries	Required	empty	The entries of the grid in display order.
`items[].icon`	Text	optional	no default	Name of the icon; unknown names fall back to a default icon.
`items[].title`	Text	Required	no default	Title of the entry.
`items[].text`	Text	Required	no default	Description text of the entry.
`items[].image`	Text	optional	no default	Image of the entry as an address; it replaces the icon. Either every entry or none.
`items[].imageAlt`	Text	optional	no default	Alternative text of the entry image.
`items[].url`	Text	optional	no default	Target of the entry as an internal path; only set it if the page is actually created.
`items[].specs`	List of entries	optional	no default	Two to four hard facts at the foot of the card, such as warranty and duration. Only values you have.
`items[].specs[].label`	Text	optional	no default	Name of the fact, for example “warranty”.
`items[].specs[].value`	Text	Required	no default	Value of the fact, for example “12 years”.

On top of these come the common settings _style and columnsByBp.

Price anchor `price-band`

A single prominent price with benefit points and a button.

If the "price" field contains an amount, a price statement for search engines is generated from it as well. So only enter prices there that really apply on the page.

In the editor: Basics
Page structure: Inline
Settings: 11

The price anchor bundles price, arguments and button. It deliberately says "on request" instead of an amount here.

All settings of the Price anchor block
Setting	Type	Required	Default	Meaning
`price`	Text	Required	no default	The price, set large.
`eyebrow`	Text	optional	no default	Short line above the price.
`unit`	Text	optional	no default	Suffix after the price, for example per month.
`note`	Text	optional	no default	Footnote below the price, for example about VAT.
`bullets`	List of texts	optional	empty	Benefit points below the price.
`button`	Group	optional	no default	Primary button next to the price.
`button.text`	Text	Required	no default	Label of the button.
`button.url`	Text	Required	no default	Target of the button as a path or full address.
`secondary`	Group	optional	no default	Second, less prominent button.
`secondary.text`	Text	Required	no default	Label of the button.
`secondary.url`	Text	Required	no default	Target of the button as a path or full address.

On top of these come the common settings _style.

Price list `price-list`

List of individual services with prices, in the style of a menu or treatment card.

In the editor: Basics
Page structure: Inline
Settings: 14

A service list with example content in the "lines" layout. Entries sharing the same "group" are collected into one group.

All settings of the Price list block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	`Unsere Leistungen`	Heading above the block.
`subtitle`	Text	optional	no default	Short line below the heading.
`layout`	Choice	optional	`lines`	Presentation of the rows: lines, dots (leader dots) or cards. Possible values: lines, dots, cards
`items`	List of entries	Required	empty	The rows in display order.
`items[].group`	Text	optional	no default	Section the row belongs to, for example starters.
`items[].title`	Text	Required	no default	Name of the service.
`items[].text`	Text	optional	no default	Short description of the service.
`items[].price`	Text	optional	no default	Price of the service.
`items[].note`	Text	optional	no default	Additional detail on the row, for example a duration.
`items[].marks`	Text	optional	no default	Marks for this row, comma separated, for example 1,3,g. Each mark appears in superscript next to the name and must be explained in the legend.
`legendTitle`	Text	optional	no default	Heading above the legend, for example Labelling.
`legend`	List of entries	optional	empty (rendering)	Legend for the marks; appears once below the entire list. Required for menus in Germany as soon as additives or allergens are labelled.
`legend[].mark`	Text	Required	no default	The mark, written exactly as in the row, for example 1 or g.
`legend[].text`	Text	Required	no default	Meaning of the mark, for example contains colouring.

On top of these come the common settings _style.

FAQ `faq`

Frequently asked questions with answers; the block also supplies the page FAQPage schema.

All FAQ blocks of a page together produce one machine-readable question-and-answer block for search engines.

In the editor: Basics
Page structure: Section start
Settings: 3

All settings of the FAQ block
Setting	Type	Required	Default	Meaning
`items`	List of entries	Required	empty	The questions and answers in display order.
`items[].question`	Text	Required	no default	The question.
`items[].answer`	Text	Required	no default	The answer to the question.

On top of these come the common settings _style.

CTA `promo`

Closing call to action; it is rendered in the footer area of the page.

This block does not appear where it sits in the list: it is rendered into the footer area of the page. One per page is therefore enough.

In the editor: Basics
Page structure: Inline
Settings: 5

All settings of the CTA block
Setting	Type	Required	Default	Meaning
`title`	Text	Required	no default	Heading of the call to action.
`text`	Text	Required	no default	One sentence that backs up the call to action.
`button_text`	Text	Required	no default	Label of the button.
`button_url`	Text	Required	no default	Target of the button.
`badge`	Text	optional	no default	Short keyword shown as a chip above the heading.

On top of these come the common settings _style.

Overview

Hero hero

Metrics stats-bar

Heading heading

Our workshop

Text paragraph

Feature grid feature-grid

Repair

Maintenance

Emergencies

Price anchor price-band

Price list price-list

FAQ faq

CTA promo

Hero `hero`

Metrics `stats-bar`

Heading `heading`

Text `paragraph`

Feature grid `feature-grid`

Price anchor `price-band`

Price list `price-list`

FAQ `faq`

CTA `promo`