On this page

Blocks: grids and cards

The largest part of the catalogue: 22 blocks that show several entries of the same kind side by side — cards, testimonials, team, opening hours, steps, tabs, timeline and comparisons. All settings are listed for each of them.

Overview

Everything that shows several entries of the same kind side by side: cards, testimonials, team, steps, tabs and timeline.

In the editor these blocks sit under "Grids & cards". Nearly all of them work with a list of entries: you add an entry, fill in its fields and repeat. In the tables you recognise those fields by the square-bracket notation, for example items[].title.

Blocks with a "columns" field additionally have the "columnsByBp" setting: it lets you set the number of columns per screen size separately.

Full rows look calmer

With three columns, three, six or nine entries look best — a half-filled last row stands out immediately. Similar text lengths per card help as well.

Columns `columns`

Container that places other blocks next to each other in columns.

The number of columns has to match the chosen distribution: "1-2" has two cells, "1-1-1" three. On narrow screens the columns stack. Columns inside columns are not possible.

In the editor: Grids & cards
Page structure: Standalone
Settings: 4

One third. The narrow column.

Two thirds. The wide column. Every cell takes any number of blocks; on narrow screens the two stack.

The "1-2" distribution: one narrow and one wide column, each holding a text block.

All settings of the Columns block
Setting	Type	Required	Default	Meaning
`layout`	Choice	Required	`1-1`	Distribution of the column widths, for example 1-2 for one third and two thirds. Possible values: 1-1, 1-2, 2-1, 1-1-1, 2-1-1, 1-2-1, 1-1-2, 1-1-1-1
`gap`	Choice	optional	`md`	Gap between the columns: sm, md or lg. Possible values: sm, md, lg
`cells`	List of entries	Required	`[{"blocks":[]},{"blocks":[]}]`	The columns; their number has to match the chosen distribution.
`cells[].blocks`	Blocks	optional	no default	The blocks in this column; every block is allowed except columns itself and the chrome blocks.

On top of these come the common settings _style. This block takes further blocks inside it.

Icon cards `icon-cards`

Cards with a large icon, short text and an optional link.

From two filled cards upwards it additionally produces a machine-readable list for search engines. Unlike the feature grid, each card can link to a target of its own.

In the editor: Grids & cards
Page structure: Inline
Settings: 8

Secure

Short description.

Fast

Short description.

Fair

Short description.

Three icon cards with the placeholders the editor inserts.

All settings of the Icon cards block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`subtitle`	Text	optional	no default	Short line below the heading.
`columns`	Number	optional	no default	Number of columns in the grid.
`items`	List of entries	optional	empty	The cards 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	optional	no default	Description text of the entry.
`items[].url`	Text	optional	no default	Target the card links to.

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

Testimonials `testimonial`

Customer voices as quote cards side by side.

Every entry with a quote and a name additionally produces a machine-readable review. So only enter real, approved customer voices here.

In the editor: Grids & cards
Page structure: Section start
Settings: 4

All settings of the Testimonials block
Setting	Type	Required	Default	Meaning
`items`	List of entries	Required	empty	The quotes in display order.
`items[].quote`	Text	Required	no default	The wording of the quote.
`items[].author`	Text	Required	no default	Who said the quote.
`items[].role`	Text	optional	no default	Role or company of the quoted person.

On top of these come the common settings _style.

Testimonial slider `testimonial-slider`

Customer voices one at a time, to page through.

In the editor: Grids & cards
Page structure: Section start
Settings: 6

A short, convincing quotation.

FN First name Last name Role, company

The slider with the placeholders from the editor. Replace them only with real, approved voices.

All settings of the Testimonial slider block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`items`	List of entries	optional	empty	The voices in order.
`items[].quote`	Text	Required	no default	The wording of the quote.
`items[].author`	Text	Required	no default	Who said the quote.
`items[].role`	Text	optional	no default	Role or company of the quoted person.
`items[].image`	Text	optional	no default	Photo of the person.

On top of these come the common settings _style.

Fact band `fact-band`

A single large statement with one highlighted figure.

In the editor: Grids & cards
Page structure: Inline
Settings: 4

98 %

Example value

A concise statement that puts a single figure into context.

A single figure with a statement beside it — example content.

All settings of the Fact band block
Setting	Type	Required	Default	Meaning
`value`	Text	optional	no default	The large figure, for example 98%.
`valueLabel`	Text	optional	no default	Label right next to the figure.
`statement`	Text	optional	no default	The statement that puts the figure in context.
`source`	Text	optional	no default	Source reference for the figure.

On top of these come the common settings _style.

Trust badges `trust-badges`

Row of short trust markers such as certificates or commitments.

In the editor: Grids & cards
Page structure: Inline
Settings: 3

Privacy under the GDPR

Accessible to WCAG

Hosting in the EU

Short properties in a row. Only enter statements here that actually apply to your website.

All settings of the Trust badges block
Setting	Type	Required	Default	Meaning
`items`	List of entries	Required	empty	The markers in display order.
`items[].label`	Text	Required	no default	Text of the marker.
`items[].icon`	Text	optional	no default	Name of the icon; unknown names fall back to a default icon.

On top of these come the common settings _style.

Logo wall `logo-wall`

Bar of customer or partner logos as proof of trust.

Without an image file an entry shows its name as text. Only use logos you have permission for.

In the editor: Grids & cards
Page structure: Inline
Settings: 5

All settings of the Logo wall block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	`Vertraut von`	Heading above the block.
`items`	List of entries	optional	empty	The logos in display order.
`items[].name`	Text	Required	no default	Name of the company; without an image it appears as a text logo.
`items[].src`	Text	optional	no default	Address of the logo file.
`items[].url`	Text	optional	no default	Target the logo links to.

On top of these come the common settings _style.

Team `team-grid`

Introduction of the people behind the business with photo, role and short bio.

Without a photo a card shows the initials of the name. Photos of people require their consent.

In the editor: Grids & cards
Page structure: Inline
Settings: 8

All settings of the Team block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`subtitle`	Text	optional	no default	Short line below the heading.
`columns`	Number	optional	`3`	Number of columns in the grid.
`items`	List of entries	optional	empty	The team members in display order.
`items[].name`	Text	Required	no default	Name of the person.
`items[].role`	Text	optional	no default	Role or function in the business.
`items[].image`	Text	optional	no default	Photo of the person; without one the initials appear.
`items[].bio`	Text	optional	no default	Short introduction of the person.

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

Opening hours `opening-hours`

Table of opening hours per weekday.

In the editor: Grids & cards
Page structure: Section start
Settings: 5

Opening hours

Monday: 09:00-18:00
Tuesday: 09:00-18:00
Wednesday: 09:00-18:00
Thursday: 09:00-18:00
Friday: 09:00-16:00
Saturday: Closed
Sunday: Closed

Appointments outside these times by arrangement.

Seven days as an example; empty times are shown as closed.

All settings of the Opening hours block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`note`	Text	optional	no default	Note below the table, for example about public holidays.
`days`	List of entries	optional	empty	The rows of the table in display order.
`days[].day`	Text	Required	no default	Weekday or range, for example Monday to Friday.
`days[].hours`	Text	optional	no default	Hours of that day; left empty the day counts as closed.

On top of these come the common settings _style.

Social links `social-links`

Row of linked profile icons for social networks.

In the editor: Grids & cards
Page structure: Inline
Settings: 6

All settings of the Social links block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`items`	List of entries	optional	empty	The profiles in display order. Without its own entries the block shows the profiles from the website master data.
`items[].network`	Text	optional	no default	Network and thus the icon; unknown names get a globe icon.
`items[].handle`	Text	optional	no default	Username at the network. The address is composed from it automatically -- for WhatsApp the phone number.
`items[].url`	Text	optional	no default	Full address. Only needed when the link differs from the usual profile; otherwise the username is enough.
`items[].label`	Text	optional	no default	Label of the link for screen readers.

On top of these come the common settings _style.

Steps `steps`

Numbered sequence of steps without interaction, for example for a procedure.

In the editor: Grids & cards
Page structure: Section start
Settings: 5

1

Enquiry

You briefly describe what you need.
2

Appointment

We agree on a date.
3

Delivery

The work starts.

A sequence of three steps.

All settings of the Steps block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`subtitle`	Text	optional	no default	Short line below the heading.
`items`	List of entries	optional	empty	The steps in order.
`items[].title`	Text	Required	no default	Title of the step.
`items[].text`	Text	optional	no default	What happens in this step.

On top of these come the common settings _style.

Stat cards `stat-cards`

Key figures as separate cards in a grid.

In the editor: Grids & cards
Page structure: Section start
Settings: 7

500+

Projects

Example value

24 h

Response time

Example value

Years

Example value

Metrics as cards with example values — more room per figure than in the metrics bar.

All settings of the Stat cards block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`subtitle`	Text	optional	no default	Short line below the heading.
`columns`	Number	optional	`3`	Number of columns in the grid.
`items`	List of entries	optional	empty	The key figures in display order.
`items[].value`	Text	Required	no default	The value shown large on the card.
`items[].label`	Text	Required	no default	Label below the value.
`items[].description`	Text	optional	no default	Explanatory sentence on the card.

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

Accordion `accordion`

Expandable sections for arbitrary content; without FAQ markup.

In the editor: Grids & cards
Page structure: Inline
Settings: 3

Expandable sections; all of them start closed.

All settings of the Accordion block
Setting	Type	Required	Default	Meaning
`items`	List of entries	Required	empty	The sections in order.
`items[].title`	Text	Required	no default	Line visible while the section is collapsed.
`items[].content`	Text	Required	no default	Content revealed on expanding.

On top of these come the common settings _style.

Disclosure `disclosure`

Expandable entries for additional information; works without scripting.

In the editor: Grids & cards
Page structure: Section start
Settings: 4

Question or title

Expandable content.

Another entry

Expandable content.

The disclosure list is plainer than the accordion and suits long lists.

All settings of the Disclosure block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`items`	List of entries	optional	empty	The expandable entries in order.
`items[].title`	Text	Required	no default	Line visible while the entry is collapsed.
`items[].content`	Text	optional	no default	Content revealed on expanding; Markdown is allowed.

On top of these come the common settings _style.

Tabs `content-tabs`

Several text blocks behind tabs; without scripting the first tab is open.

In the editor: Grids & cards
Page structure: Section start
Settings: 5

Content of the first tab.

Tabs stack a lot of content in little space; they can also be operated with the arrow keys.

All settings of the Tabs block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`subtitle`	Text	optional	no default	Short line below the heading.
`items`	List of entries	optional	empty	The tabs in display order.
`items[].label`	Text	Required	no default	Label of the tab.
`items[].content`	Text	optional	no default	Content of the tab; Markdown is allowed.

On top of these come the common settings _style.

Timeline `timeline`

Vertical timeline for a procedure or the history of the business.

In the editor: Grids & cards
Page structure: Inline
Settings: 5

Step 1

Description.
Step 2

Description.

The timeline visibly connects its stations.

All settings of the Timeline block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`steps`	List of entries	optional	empty	The stations in order.
`steps[].title`	Text	Required	no default	Title of the station.
`steps[].text`	Text	optional	no default	What happens at this station.
`steps[].icon`	Text	optional	no default	Name of the icon; unknown names fall back to a default icon.

On top of these come the common settings _style.

Process steps `process-steps`

Procedure in steps, with clickable tabs on wide screens.

From two steps upwards it additionally produces a machine-readable how-to for search engines.

In the editor: Grids & cards
Page structure: Inline
Settings: 4

All settings of the Process steps block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading of the procedure; it also names the how-to in the structured data.
`items`	List of entries	Required	empty	The steps in order.
`items[].title`	Text	Required	no default	Title of the step.
`items[].text`	Text	Required	no default	What happens in this step.

On top of these come the common settings _style.

Metric band `metric-band`

Full-width band with several key figures that count up while scrolling.

In the editor: Grids & cards
Page structure: Standalone
Settings: 8

100

Example value

99.9%

Example value

The metric band spans the full width and brings its own background.

All settings of the Metric band block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`variant`	Choice	optional	`dark`	Colour scheme of the band: dark or light. Possible values: light, dark
`items`	List of entries	optional	empty	The key figures of the band in display order.
`items[].value`	Text or number	Required	no default	The numeric value that counts up.
`items[].prefix`	Text	optional	no default	Characters before the value, for example a currency symbol.
`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.
`items[].source`	Text	optional	no default	Source reference below the figure.

On top of these come the common settings _style.

Mini cases `mini-cases`

Anonymised project stories following the pattern situation, action, result.

In the editor: Grids & cards
Page structure: Inline
Settings: 7

Example

Starting point

Measure

Result

Example

Starting point

Measure

Result

Anonymised examples.

Starting point, measure and result per case. Only describe processes here that really happened.

All settings of the Mini cases block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`disclaimer`	Text	optional	no default	Note stating that the cases are anonymised.
`items`	List of entries	optional	empty	The cases in display order.
`items[].tag`	Text	Required	no default	Short keyword for the case, for example the industry.
`items[].before`	Text	Required	no default	The starting situation.
`items[].action`	Text	Required	no default	What was done.
`items[].after`	Text	Required	no default	The result.

On top of these come the common settings _style.

Split feature `split-feature`

Sections of text and visual panel, alternating left and right.

In the editor: Grids & cards
Page structure: Inline
Settings: 9

All settings of the Split feature block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`items`	List of entries	optional	empty	The sections in order.
`items[].title`	Text	Required	no default	Title of the entry.
`items[].text`	Text	optional	no default	Description text of the entry.
`items[].bullets`	List of texts	optional	no default	Bullet points below the text.
`items[].icon`	Text	optional	no default	Name of the icon; unknown names fall back to a default icon.
`items[].html`	Text	optional	no default	HTML for the visual panel of the section.
`items[].svg`	Text	optional	no default	SVG for the visual panel of the section.
`items[].reverse`	Yes/no	optional	no default	Swaps text and visual panel for this section.

On top of these come the common settings _style.

Comparison cards `vs-cards`

Two or more approaches as cards side by side, each with pros and cons.

In the editor: Grids & cards
Page structure: Inline
Settings: 9

Recommended

Option A

One fixed contact person
Agreed response time

Option B

Changing contact people
No agreed response time

Two cards set against each other. Compare facts only, never named providers.

All settings of the Comparison cards block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`subtitle`	Text	optional	no default	Short line below the heading.
`items`	List of entries	optional	empty	The cards in display order.
`items[].title`	Text	Required	no default	Title of the entry.
`items[].badge`	Text	optional	no default	Short keyword shown as a chip on the card.
`items[].highlight`	Yes/no	optional	no default	Highlights this card over the others.
`items[].points`	List of entries	Required	no default	The points on the card.
`items[].points[].text`	Text	Required	no default	The wording of the point.
`items[].points[].good`	Yes/no	optional	no default	Marks the point as an advantage instead of a drawback.

On top of these come the common settings _style.

Feature tabs `feature-tabs`

Large sets of features grouped into tabs.

In the editor: Grids & cards
Page structure: Inline
Settings: 9

Item

Short description.

Item

Short description.

Feature tabs group large ranges of services into tabs.

All settings of the Feature tabs block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`subtitle`	Text	optional	no default	Short line below the heading.
`tabs`	List of entries	optional	empty	The tabs in display order.
`tabs[].label`	Text	Required	no default	Label of the tab.
`tabs[].icon`	Text	optional	no default	Icon in the tab.
`tabs[].items`	List of entries	Required	no default	The entries in this tab.
`tabs[].items[].icon`	Text	optional	no default	Name of the icon; unknown names fall back to a default icon.
`tabs[].items[].title`	Text	Required	no default	Title of the entry.
`tabs[].items[].text`	Text	optional	no default	Description text of the entry.

On top of these come the common settings _style.

Overview

Columns columns

Icon cards icon-cards

Secure

Fast

Fair

Testimonials testimonial

Testimonial slider testimonial-slider

Fact band fact-band

Trust badges trust-badges

Logo wall logo-wall

Team team-grid

Opening hours opening-hours

Opening hours

Social links social-links

Steps steps

Enquiry

Appointment

Delivery

Stat cards stat-cards

Accordion accordion

Section one

Section two

Disclosure disclosure

Tabs content-tabs

Timeline timeline

Step 1

Step 2

Process steps process-steps

Metric band metric-band

Mini cases mini-cases

Split feature split-feature

Comparison cards vs-cards

Option A

Option B

Feature tabs feature-tabs

Item

Item

Item

Columns `columns`

Icon cards `icon-cards`

Testimonials `testimonial`

Testimonial slider `testimonial-slider`

Fact band `fact-band`

Trust badges `trust-badges`

Logo wall `logo-wall`

Team `team-grid`

Opening hours `opening-hours`

Social links `social-links`

Steps `steps`

Stat cards `stat-cards`

Accordion `accordion`

Disclosure `disclosure`

Tabs `content-tabs`

Timeline `timeline`

Process steps `process-steps`

Metric band `metric-band`

Mini cases `mini-cases`

Split feature `split-feature`

Comparison cards `vs-cards`

Feature tabs `feature-tabs`