Auf dieser Seite
Bausteine: Grids und Karten
Der größte Teil des Katalogs: 22 Bausteine, die mehrere gleichartige Einträge nebeneinander zeigen — Karten, Stimmen, Team, Öffnungszeiten, Schritte, Reiter, Zeitstrahl und Gegenüberstellungen. Zu jedem stehen hier alle Einstellungen.
Überblick
Alles, was mehrere gleichartige Einträge nebeneinander zeigt: Karten, Stimmen, Team, Schritte, Reiter und Zeitstrahl.
Diese Bausteine stehen im Editor unter „Grids & Karten". Fast alle arbeiten mit einer Liste
von Einträgen: Sie fügen einen Eintrag hinzu, füllen seine Felder und wiederholen das. In
den Tabellen erkennen Sie diese Felder an der Schreibweise mit eckigen Klammern, etwa items[].title.
Bausteine mit dem Feld „columns" haben zusätzlich die Einstellung „columnsByBp": damit legen Sie die Spaltenzahl je Bildschirmgröße getrennt fest.
Volle Reihen wirken ruhiger
Bei drei Spalten sehen drei, sechs oder neun Einträge am besten aus — eine angebrochene letzte Reihe fällt sofort auf. Ähnlich lange Texte je Karte helfen zusätzlich.
Spalten columns
Container, der andere Bausteine nebeneinander in Spalten stellt.
Die Zahl der Spalten muss zur gewählten Verteilung passen: „1-2" hat zwei Zellen, „1-1-1" drei. Auf schmalen Bildschirmen stehen die Spalten untereinander. Verschachtelte Spalten sind nicht möglich.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Eigenständig
- Einstellungen
- 4
Ein Drittel. Die schmale Spalte.
Zwei Drittel. Die breite Spalte. Jede Zelle nimmt beliebig viele Bausteine auf; auf schmalen Bildschirmen stehen beide untereinander.
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
layout | Auswahl | Pflicht | 1-1 | Verteilung der Spaltenbreiten, zum Beispiel 1-2 für ein Drittel und zwei Drittel. Mögliche Werte: 1-1, 1-2, 2-1, 1-1-1, 2-1-1, 1-2-1, 1-1-2, 1-1-1-1 |
gap | Auswahl | optional | md | Abstand zwischen den Spalten: sm, md oder lg. Mögliche Werte: sm, md, lg |
cells | Einträge | Pflicht | [{"blocks":[]},{"blocks":[]}] | Die Spalten; ihre Anzahl muss zur gewählten Verteilung passen. |
cells[].blocks | Bausteine | optional | keine Vorgabe | Die Bausteine in dieser Spalte; erlaubt ist jeder Baustein außer Spalten selbst und den Rahmen-Bausteinen. |
Dazu kommen die gemeinsamen Einstellungen _style. Dieser Baustein nimmt weitere Bausteine auf.
Icon-Karten icon-cards
Karten mit großem Symbol, kurzem Text und optionalem Link.
Ab zwei ausgefüllten Karten entsteht daraus zusätzlich eine maschinenlesbare Liste für Suchmaschinen. Anders als beim Feature-Grid kann jede Karte auf ein eigenes Ziel verlinken.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 8
Sicher
Kurzbeschreibung.
Schnell
Kurzbeschreibung.
Fair
Kurzbeschreibung.
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
columns | Zahl | optional | keine Vorgabe | Anzahl der Spalten im Raster. |
items | Einträge | optional | leer | Die Karten in Anzeigereihenfolge. |
items[].icon | Text | optional | keine Vorgabe | Name des Icons; unbekannte Namen fallen auf ein Standard-Icon zurück. |
items[].title | Text | Pflicht | keine Vorgabe | Titel des Eintrags. |
items[].text | Text | optional | keine Vorgabe | Beschreibungstext des Eintrags. |
items[].url | Text | optional | keine Vorgabe | Ziel, auf das die Karte verlinkt. |
Dazu kommen die gemeinsamen Einstellungen _style und columnsByBp.
Stimmen testimonial
Kundenstimmen als Zitatkarten nebeneinander.
Aus jedem Eintrag mit Zitat und Name entsteht zusätzlich eine maschinenlesbare Bewertung. Tragen Sie hier deshalb nur echte, freigegebene Kundenstimmen ein.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 4
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
items | Einträge | Pflicht | leer | Die Zitate in Anzeigereihenfolge. |
items[].quote | Text | Pflicht | keine Vorgabe | Der Wortlaut des Zitats. |
items[].author | Text | Pflicht | keine Vorgabe | Wer das Zitat gesagt hat. |
items[].role | Text | optional | keine Vorgabe | Rolle oder Unternehmen der zitierten Person. |
Dazu kommen die gemeinsamen Einstellungen _style.
Stimmen-Slider testimonial-slider
Kundenstimmen einzeln nacheinander zum Durchblättern.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 6
Kurzes, überzeugendes Zitat.
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
items | Einträge | optional | leer | Die Stimmen in Reihenfolge. |
items[].quote | Text | Pflicht | keine Vorgabe | Der Wortlaut des Zitats. |
items[].author | Text | Pflicht | keine Vorgabe | Wer das Zitat gesagt hat. |
items[].role | Text | optional | keine Vorgabe | Rolle oder Unternehmen der zitierten Person. |
items[].image | Text | optional | keine Vorgabe | Foto der Person. |
Dazu kommen die gemeinsamen Einstellungen _style.
Fakten-Band fact-band
Eine einzelne große Aussage mit hervorgehobener Kennzahl.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 4
Eine prägnante Aussage, die einen einzelnen Wert einordnet.
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
value | Text | optional | keine Vorgabe | Die große Kennzahl, zum Beispiel 98 %. |
valueLabel | Text | optional | keine Vorgabe | Beschriftung direkt an der Kennzahl. |
statement | Text | optional | keine Vorgabe | Die Aussage, die die Kennzahl einordnet. |
source | Text | optional | keine Vorgabe | Quellenangabe zur Kennzahl. |
Dazu kommen die gemeinsamen Einstellungen _style.
Trust-Badges trust-badges
Reihe kurzer Vertrauensmerkmale wie Zertifikate oder Zusagen.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 3
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
items | Einträge | Pflicht | leer | Die Merkmale in Anzeigereihenfolge. |
items[].label | Text | Pflicht | keine Vorgabe | Text des Merkmals. |
items[].icon | Text | optional | keine Vorgabe | Name des Icons; unbekannte Namen fallen auf ein Standard-Icon zurück. |
Dazu kommen die gemeinsamen Einstellungen _style.
Logo-Wall logo-wall
Leiste mit Kunden- oder Partnerlogos als Vertrauensbeleg.
Ohne Bilddatei zeigt ein Eintrag seinen Namen als Text. Verwenden Sie nur Logos, für die Sie die Erlaubnis haben.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 5
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | Vertraut von | Überschrift über dem Baustein. |
items | Einträge | optional | leer | Die Logos in Anzeigereihenfolge. |
items[].name | Text | Pflicht | keine Vorgabe | Name des Unternehmens; ohne Bild erscheint er als Text-Logo. |
items[].src | Text | optional | keine Vorgabe | Adresse der Logodatei. |
items[].url | Text | optional | keine Vorgabe | Ziel, auf das das Logo verlinkt. |
Dazu kommen die gemeinsamen Einstellungen _style.
Team team-grid
Vorstellung der Personen hinter dem Betrieb mit Foto, Rolle und Kurzvorstellung.
Ohne Foto zeigt eine Karte die Anfangsbuchstaben des Namens. Fotos von Personen brauchen deren Einverständnis.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 8
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
columns | Zahl | optional | 3 | Anzahl der Spalten im Raster. |
items | Einträge | optional | leer | Die Team-Mitglieder in Anzeigereihenfolge. |
items[].name | Text | Pflicht | keine Vorgabe | Name der Person. |
items[].role | Text | optional | keine Vorgabe | Rolle oder Funktion im Betrieb. |
items[].image | Text | optional | keine Vorgabe | Foto der Person; ohne Foto erscheinen die Initialen. |
items[].bio | Text | optional | keine Vorgabe | Kurze Vorstellung der Person. |
Dazu kommen die gemeinsamen Einstellungen _style und columnsByBp.
Öffnungszeiten opening-hours
Tabelle der Öffnungszeiten je Wochentag.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 5
Öffnungszeiten
- Montag
- 09:00-18:00
- Dienstag
- 09:00-18:00
- Mittwoch
- 09:00-18:00
- Donnerstag
- 09:00-18:00
- Freitag
- 09:00-16:00
- Samstag
- Geschlossen
- Sonntag
- Geschlossen
Termine außerhalb der Zeiten nach Vereinbarung.
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
note | Text | optional | keine Vorgabe | Hinweis unter der Tabelle, etwa zu Feiertagen. |
days | Einträge | optional | leer | Die Zeilen der Tabelle in Anzeigereihenfolge. |
days[].day | Text | Pflicht | keine Vorgabe | Wochentag oder Zeitraum, zum Beispiel Montag bis Freitag. |
days[].hours | Text | optional | keine Vorgabe | Zeiten des Tages; ohne Angabe gilt der Tag als geschlossen. |
Dazu kommen die gemeinsamen Einstellungen _style.
Schritte steps
Nummerierte Schrittfolge ohne Interaktion, etwa für einen Ablauf.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 5
- 1
Anfrage
Sie schildern kurz, worum es geht.
- 2
Termin
Wir stimmen einen Termin ab.
- 3
Umsetzung
Die Arbeiten laufen an.
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
items | Einträge | optional | leer | Die Schritte in Reihenfolge. |
items[].title | Text | Pflicht | keine Vorgabe | Titel des Schritts. |
items[].text | Text | optional | keine Vorgabe | Was in diesem Schritt passiert. |
Dazu kommen die gemeinsamen Einstellungen _style.
Kennzahl-Karten stat-cards
Kennzahlen als eigenständige Karten im Raster.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 7
Beispielwert
Beispielwert
Beispielwert
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
columns | Zahl | optional | 3 | Anzahl der Spalten im Raster. |
items | Einträge | optional | leer | Die Kennzahlen in Anzeigereihenfolge. |
items[].value | Text | Pflicht | keine Vorgabe | Der Wert, der groß auf der Karte steht. |
items[].label | Text | Pflicht | keine Vorgabe | Beschriftung unter dem Wert. |
items[].description | Text | optional | keine Vorgabe | Erläuternder Satz auf der Karte. |
Dazu kommen die gemeinsamen Einstellungen _style und columnsByBp.
Akkordeon accordion
Aufklappbare Abschnitte für beliebige Inhalte; ohne FAQ-Auszeichnung.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 3
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
items | Einträge | Pflicht | leer | Die Abschnitte in Reihenfolge. |
items[].title | Text | Pflicht | keine Vorgabe | Zeile, die im zugeklappten Zustand sichtbar ist. |
items[].content | Text | Pflicht | keine Vorgabe | Inhalt, der beim Aufklappen erscheint. |
Dazu kommen die gemeinsamen Einstellungen _style.
Aufklapp-Liste disclosure
Aufklappbare Einträge für Zusatzinformationen; funktioniert ohne Skript.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 4
Frage oder Titel
Weiterer Eintrag
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
items | Einträge | optional | leer | Die aufklappbaren Einträge in Reihenfolge. |
items[].title | Text | Pflicht | keine Vorgabe | Zeile, die im zugeklappten Zustand sichtbar ist. |
items[].content | Text | optional | keine Vorgabe | Inhalt, der beim Aufklappen erscheint; Markdown ist erlaubt. |
Dazu kommen die gemeinsamen Einstellungen _style.
Tabs content-tabs
Mehrere Textblöcke hinter Reitern; ohne Skript ist der erste Reiter offen.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Abschnitts-Beginn
- Einstellungen
- 5
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
items | Einträge | optional | leer | Die Reiter in Anzeigereihenfolge. |
items[].label | Text | Pflicht | keine Vorgabe | Beschriftung des Reiters. |
items[].content | Text | optional | keine Vorgabe | Inhalt des Reiters; Markdown ist erlaubt. |
Dazu kommen die gemeinsamen Einstellungen _style.
Zeitstrahl timeline
Senkrechte Zeitachse für einen Ablauf oder die Geschichte des Betriebs.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 5
-
Schritt 1
Beschreibung.
-
Schritt 2
Beschreibung.
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
steps | Einträge | optional | leer | Die Stationen in Reihenfolge. |
steps[].title | Text | Pflicht | keine Vorgabe | Titel der Station. |
steps[].text | Text | optional | keine Vorgabe | Was an dieser Station passiert. |
steps[].icon | Text | optional | keine Vorgabe | Name des Icons; unbekannte Namen fallen auf ein Standard-Icon zurück. |
Dazu kommen die gemeinsamen Einstellungen _style.
Prozess-Schritte process-steps
Ablauf in Schritten, auf breiten Bildschirmen mit Reitern zum Durchklicken.
Ab zwei Schritten entsteht daraus zusätzlich eine maschinenlesbare Anleitung für Suchmaschinen.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 4
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift des Ablaufs; sie benennt zugleich die Anleitung in den strukturierten Daten. |
items | Einträge | Pflicht | leer | Die Schritte in Reihenfolge. |
items[].title | Text | Pflicht | keine Vorgabe | Titel des Schritts. |
items[].text | Text | Pflicht | keine Vorgabe | Was in diesem Schritt passiert. |
Dazu kommen die gemeinsamen Einstellungen _style.
Metrik-Band metric-band
Vollbreites Band mit mehreren Kennzahlen, die beim Scrollen hochzählen.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Eigenständig
- Einstellungen
- 8
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
variant | Auswahl | optional | dark | Farbgebung des Bandes: dunkel oder hell. Mögliche Werte: light, dark |
items | Einträge | optional | leer | Die Kennzahlen des Bandes in Anzeigereihenfolge. |
items[].value | Text oder Zahl | Pflicht | keine Vorgabe | Der Zahlenwert, der hochgezählt wird. |
items[].prefix | Text | optional | keine Vorgabe | Zeichen vor dem Wert, zum Beispiel ein Währungszeichen. |
items[].suffix | Text | optional | keine Vorgabe | Zeichen nach dem Wert, zum Beispiel ein Prozentzeichen. |
items[].label | Text | Pflicht | keine Vorgabe | Beschriftung unter dem Wert. |
items[].source | Text | optional | keine Vorgabe | Quellenangabe unter der Kennzahl. |
Dazu kommen die gemeinsamen Einstellungen _style.
Mini-Fälle mini-cases
Anonymisierte Projektverläufe nach dem Muster Ausgangslage, Maßnahme, Ergebnis.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 7
Anonymisierte Beispiele.
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
disclaimer | Text | optional | keine Vorgabe | Hinweis, dass die Fälle anonymisiert sind. |
items | Einträge | optional | leer | Die Fälle in Anzeigereihenfolge. |
items[].tag | Text | Pflicht | keine Vorgabe | Kurzes Kennwort des Falls, zum Beispiel die Branche. |
items[].before | Text | Pflicht | keine Vorgabe | Die Ausgangslage. |
items[].action | Text | Pflicht | keine Vorgabe | Was gemacht wurde. |
items[].after | Text | Pflicht | keine Vorgabe | Das Ergebnis. |
Dazu kommen die gemeinsamen Einstellungen _style.
Split-Feature split-feature
Abschnitte aus Text und Bildfläche, abwechselnd links und rechts.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 9
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
items | Einträge | optional | leer | Die Abschnitte in Reihenfolge. |
items[].title | Text | Pflicht | keine Vorgabe | Titel des Eintrags. |
items[].text | Text | optional | keine Vorgabe | Beschreibungstext des Eintrags. |
items[].bullets | Textliste | optional | keine Vorgabe | Stichpunkte unter dem Text. |
items[].icon | Text | optional | keine Vorgabe | Name des Icons; unbekannte Namen fallen auf ein Standard-Icon zurück. |
items[].html | Text | optional | keine Vorgabe | HTML für die Bildfläche des Abschnitts. |
items[].svg | Text | optional | keine Vorgabe | SVG für die Bildfläche des Abschnitts. |
items[].reverse | Ja/Nein | optional | keine Vorgabe | Dreht Text und Bildfläche für diesen Abschnitt. |
Dazu kommen die gemeinsamen Einstellungen _style.
Gegenüberstellung vs-cards
Zwei oder mehr Ansätze als Karten nebeneinander, je mit Plus- und Minuspunkten.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 9
Variante A
- Fester Ansprechpartner
- Feste Reaktionszeit
Variante B
- Wechselnde Ansprechpartner
- Keine feste Reaktionszeit
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
items | Einträge | optional | leer | Die Karten in Anzeigereihenfolge. |
items[].title | Text | Pflicht | keine Vorgabe | Titel des Eintrags. |
items[].badge | Text | optional | keine Vorgabe | Kurzes Kennwort als Chip auf der Karte. |
items[].highlight | Ja/Nein | optional | keine Vorgabe | Hebt diese Karte gegenüber den anderen hervor. |
items[].points | Einträge | Pflicht | keine Vorgabe | Die Punkte auf der Karte. |
items[].points[].text | Text | Pflicht | keine Vorgabe | Der Punkt im Wortlaut. |
items[].points[].good | Ja/Nein | optional | keine Vorgabe | Markiert den Punkt als Vorteil statt als Nachteil. |
Dazu kommen die gemeinsamen Einstellungen _style.
Feature-Tabs feature-tabs
Große Leistungsumfänge nach Reitern gruppiert.
- Im Editor
- Grids & Karten
- Seitenaufbau
- Im Abschnitt
- Einstellungen
- 9
Punkt
Kurzbeschreibung.
Punkt
Kurzbeschreibung.
Punkt
Kurzbeschreibung.
| Einstellung | Art | Pflicht | Vorgabe | Bedeutung |
|---|---|---|---|---|
title | Text | optional | keine Vorgabe | Überschrift über dem Baustein. |
subtitle | Text | optional | keine Vorgabe | Kurzer Text unter der Überschrift. |
tabs | Einträge | optional | leer | Die Reiter in Anzeigereihenfolge. |
tabs[].label | Text | Pflicht | keine Vorgabe | Beschriftung des Reiters. |
tabs[].icon | Text | optional | keine Vorgabe | Symbol im Reiter. |
tabs[].items | Einträge | Pflicht | keine Vorgabe | Die Einträge in diesem Reiter. |
tabs[].items[].icon | Text | optional | keine Vorgabe | Name des Icons; unbekannte Namen fallen auf ein Standard-Icon zurück. |
tabs[].items[].title | Text | Pflicht | keine Vorgabe | Titel des Eintrags. |
tabs[].items[].text | Text | optional | keine Vorgabe | Beschreibungstext des Eintrags. |
Dazu kommen die gemeinsamen Einstellungen _style.