HTML-Block
Der html-Block gibt freien HTML-Code direkt auf der Seite aus – unsanitiert, unverändert. Diese Seite zeigt live, was damit möglich ist.
Grundstruktur
Minimalaufbau: Block mit type: "html" und einem code-Feld. Was drin steht, erscheint 1:1 auf der Seite.
Typografie: Eyebrow & Lead
Zwei kleine Klassen mit großer Wirkung: eyebrow setzt einen Kicker in Versalien über die Überschrift, lead macht den Einstiegsabsatz größer. Ergänzt um text-muted und text-small entsteht eine klare Text-Hierarchie – ganz ohne Inline-Styles.
Überschrift mit Kicker
Der Lead-Absatz fasst den Abschnitt in einem Satz zusammen – größer gesetzt, damit der Einstieg leicht fällt.
Danach folgt normaler Fließtext in Standardgröße. Gedämpfter Text über text-muted und kleinerer Text über text-small ergänzen die Hierarchie.
<span class="eyebrow">Design-System</span>
<h3 class="mt-0">Überschrift mit Kicker</h3>
<p class="lead">Der Lead-Absatz fasst den Abschnitt zusammen.</p>Callout-Boxen
Hinweisboxen für verschiedene Kontexte – Erfolg, Info, Warnung, Fehler. Die Klassen callout-success, callout-info, callout-warning und callout-error unterscheiden die Varianten über eine dezente Akzent-Nuance in den Markenfarben.
Aktion erfolgreich abgeschlossen. Alles hat funktioniert.
Das ist eine Information, die du dir merken solltest.
Vorsicht – diese Aktion kann nicht rückgängig gemacht werden.
Etwas ist schiefgelaufen. Bitte erneut versuchen.
Panel, Info-Box & Zitat im Vergleich
Drei Box-Typen für drei Zwecke, hier nebeneinander in einem cols cols-3-Raster: panel als ruhige, petrol-getönte Fläche, info-box als akzentuierter Hinweis und quote-box für Zitate.
Weiche, getönte Fläche für ruhige Inhaltsgruppen ohne Signalwirkung – gut zum Bündeln zusammengehöriger Inhalte.
Akzentuierte Hinweisbox – lenkt den Blick gezielt auf eine wichtige Information.
„Die quote-box setzt Zitate sichtbar vom Fließtext ab.“
— Beispielquelle, 2026
Tabelle
Tabellen sind als eigener Blocktyp nicht vorgesehen – der html-Block macht es möglich. Die Klasse table-wrap übernimmt Rahmen, Kopfzeile und Zeilen-Stil und hält die Tabelle auf kleinen Bildschirmen scrollbar.
| Blocktyp | Zweck | Pflichtfelder |
|---|---|---|
heading | Überschriften H1–H6 | level, text |
text | Fließtext mit HTML | html |
image | Bilder | src, alt |
list | Listen | ordered, items |
buttons | Links als Buttons | items[].label, href |
columns | Mehrspaltige Layouts | columns, items |
html | Freier HTML-Code | code |
blog_overview | Liste der Blog-Beiträge | – (optional category) |
form | Formulare mit Feld-Baukasten | fields[].name, label, type |
Vergleichstabelle
Für Gegenüberstellungen gibt es die Zusatzklasse compare-table auf dem table-wrap – kombiniert mit den Spans compare-yes, compare-no und compare-part für Ja/Nein/Teilweise-Zellen in Markenfarben.
| Funktion | text-Block | columns-Block | html-Block |
|---|---|---|---|
| Fließtext | ✓ Ja | ✓ Ja | ✓ Ja |
| Sanitierung | ✓ Ja | ✓ Ja | ✗ Nein |
| Tabellen | ✗ Nein | ✗ Nein | ✓ Ja |
| Mehrspaltig | ✗ Nein | ✓ Ja | ◐ Mit CSS |
| Animationen | ✗ Nein | ✗ Nein | ✓ Ja |
<div class="table-wrap compare-table">
...
<td><span class="compare-yes">✓ Ja</span></td>
<td><span class="compare-no">✗ Nein</span></td>
<td><span class="compare-part">◐ Mit CSS</span></td>
</div>Accordion (aufklappbar)
Kein JavaScript nötig: das native HTML-Element <details> mit <summary> macht Akkordeons rein mit HTML möglich. Die Klasse faq-list übernimmt das komplette Styling. Ideal für FAQs oder kompakte Informationsblöcke.
Was ist der Unterschied zwischen html- und text-Block?
Der text-Block wird sanitiert – nur erlaubte Tags bleiben. Der html-Block gibt alles 1:1 aus. Für Fließtext immer text-Block, für komplexe UI html-Block.
Funktioniert CSS im html-Block?
Ja. Inline-Styles und <style>-Tags funktionieren vollständig. Klassen-Scoping empfiehlt sich, um Konflikte mit dem Rest der Seite zu vermeiden.
Kann ich JavaScript einbetten?
Ja – <script>-Tags werden ausgegeben. Skripte von externen Domains brauchen seit Version 1.16 einen Eintrag in config/site.json unter csp.script_src, sonst blockiert die Content-Security-Policy sie – mehr dazu in Content-Security-Policy erklärt. Setze Skripte sparsam ein: Sie verlangsamen die Seite und erzeugen Wartungsaufwand.
Wie bleibt das Akkordeon wartbar?
Sprechende Block-IDs (z.B. html_faq_lieferung) helfen beim Wiederfinden. Kommentare im HTML-Code erleichtern spätere Bearbeitungen durch Menschen oder Maschinen.
Fortschrittsbalken
Visuelle Fortschritts- oder Kompetenzanzeigen über die Klassen progress, progress-bar und progress-fill – nur der Prozentwert steht als width direkt im HTML. Geeignet für Fähigkeiten, Projektstatus oder Umfrageergebnisse.
Beispielwerte – so sieht ein Fortschrittsbalken aus.
Statistik-Kacheln
Große Zahlen oder Kennwerte visuell hervorheben – z.B. für Landingpages, Jahresberichte oder Produktseiten. CSS Grid sorgt für ein responsives Raster.
Schritt-für-Schritt-Anleitung
Nummerierte Abläufe als Raster: steps-grid ordnet die Schritte an, step kombiniert Nummer und Text, step-number liefert den Kreis – mit accent wird der letzte (oder wichtigste) Schritt in der Primärfarbe hervorgehoben.
Per API oder Admin-Oberfläche eine neue Seite mit Titel und Slug erstellen.
Inhalte als heading-, text- und html-Blöcke strukturieren.
Vorschau kontrollieren – Struktur, Links und Darstellung.
Status auf „published“ setzen – die Seite ist live.
Karten-Raster
Content-Cards mit Icon, Titel und Beschreibung – per CSS Grid automatisch responsiv. Die Klassen card-grid und card bringen Rahmen, Radius und Hover-Effekt mit.
Dateibasiert
Inhalte als JSON-Dateien – kein Datenbankserver nötig, einfache Backups.
Maschinenlesbar
Strukturierte API und jede Seite auch als Markdown – Maschinen können Inhalte lesen und pflegen.
Blockbasiert
Inhalte aus definierten Blöcken – konsistent, nachvollziehbar, erweiterbar.
Schnell
Dateien lesen statt Datenbank abfragen – kein Datenbankserver im Weg.
Sicher
Token-Auth, CSRF-Schutz, Brute-Force-Sperre – solide Absicherung.
Flexibel
Themes, Fonts, Farben – einstellbar im Theme oder über die Styles-API.
Feature-Liste mit Häkchen
Kompakter als Karten, übersichtlicher als eine einfache Liste: feature-grid mit feature-item-Einträgen, jeweils eingeleitet durch ein feature-check-Häkchen.
Alle Inhalte lesen und schreiben per REST.
Neun klar definierte Blocktypen.
Fertige CSS-Klassen statt Inline-Styles.
Dateibasiert – Backup per Kopie.
Komplett über die Styles-API steuerbar.
Seiten, Beiträge, Medien, Theme und Header/Footer lassen sich per API verwalten.
Zeitleiste
Chronologische Abläufe, Roadmaps oder Entwicklungsschritte lassen sich als vertikale Zeitleiste darstellen – die Klassen timeline, timeline-item und timeline-dot liefern Linie und Punkte.
Grundstruktur, API, Blocktypen und Admin-Oberfläche entstehen – diese Website läuft von Anfang an darauf.
Erstveröffentlichung, kurz darauf Theme-Editor, Custom CSS und zehn Schriftfamilien (1.1 und 1.2).
1.11: statischer Suchindex für die Live-Suche. 1.12: jede Seite als Markdown, llms.txt, RSS-Feed und strukturierte Daten.
1.15: Formulare mit Einsendungen im Admin und Spam-Schutz ohne Cookie. 1.16: Content-Security-Policy per site.json erweiterbar.
1.17: eigenes Update-Paket – angepasste Dateien bleiben erhalten, Backup und Rollback umfassen alle ersetzten Dateien.
CTA-Banner
Ein auffälliger, vollbreiter Banner – gut für Abschnittstrennungen, Call-to-Actions oder Highlights innerhalb einer Seite. Die Klasse cta-box liefert helle Glas-Optik, Zentrierung und Button-Zeile.
Inhalte strukturieren.
Maschinen verstehen.
Das CMF verbindet Menschen, Maschinen und Internet über eine gemeinsame Inhaltsstruktur.
Flex-Split: Icon, Text & Aktion
Die Klasse flex-split stellt mehrere Elemente in eine Zeile und verteilt den Platz: Icon links, Text in der Mitte, Button rechts. Auf schmalen Bildschirmen bricht die Zeile sauber um. Hier kombiniert mit einem panel als Rahmen.
Icon, Beschreibung und Aktion in einer kompakten Zeile – z. B. für Newsletter, Downloads oder Kontakt.
<div class="flex-split">
<svg ...></svg>
<div><strong>Titel</strong><br><span class="text-small text-muted">Beschreibung</span></div>
<a href="/kontakt" class="btn primary">Loslegen</a>
</div>Tabs (ohne JavaScript)
Tab-Navigation rein mit HTML und CSS – über Radio-Buttons und :checked-Selektoren. Kein JavaScript, kein Framework. Klassischer CSS-Trick, der zuverlässig funktioniert.
Ein dateibasiertes CMS mit klarer Blockstruktur, JSON-API und Unterstützung für maschinengestützte Inhaltspflege.
heading, text, image, list, buttons, columns, html, blog_overview und form. Der html-Block ist der flexibelste von allen.Bewertung & Testimonial
Kundenstimmen, Rezensionen oder Produkt-Ratings lassen sich mit einfachem HTML sauber darstellen: Karten über card, Avatare über step-number. Die Sterne sind Unicode-Zeichen – kein Bild, kein Icon-Font.
Beispielinhalt – so sieht ein Testimonial-Block aus.
"Hier steht das Zitat – ein, zwei Sätze Rückmeldung zu deinem Angebot."
Rolle
"Ein zweites Beispielzitat. Die Sterne sind Zeichen im Text und lassen sich frei setzen."
Rolle
CSS-Animationen
<style>-Tags im html-Block ermöglichen vollständige CSS-Animationen – Keyframes, Transitions, Pulsieren, Drehen. Alles ohne JavaScript.
Badges & Tags
Kleine Labels für Status, Kategorien oder Schlagworte – als Pill-Badges in gedeckten Markentönen über die Klassen badge-green, badge-blue, badge-orange, badge-red und badge-gray.
Wann html-Block, wann text-Block?
text-Block verwenden
- Normale Absätze und Fließtext
- Links, strong, em, code
- Einfache Listen mit ul/ol
- Wenn Sanitierung gewünscht ist
- Von Maschinen erzeugte Inhalte
html-Block verwenden
- Tabellen und komplexe Layouts
- Akkordeons, Tabs, Cards
- Animationen und visuelle Effekte
- Embeds (iframes, Karten, Videos)
- Alles, was kein eigener Blocktyp abdeckt
Bereit zum Bauen?
Die API ist bereit. Alle Blocktypen sind dokumentiert. Fang einfach an – im Admin-Bereich, direkt über die API oder mit einem KI-Assistenten, der die API für dich bedient.