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 |
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. Sie sollten sparsam und gezielt eingesetzt werden, da sie die Seite verlangsamen und Wartungsaufwand erzeugen können.
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-Systeme.
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.
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.
maschinenkompatibel
Strukturierte API ermöglicht vollautomatische Inhaltspflege durch Maschinen-Systeme.
Blockbasiert
Inhalte aus definierten Blöcken – konsistent, nachvollziehbar, erweiterbar.
Schnell
Statische HTML-Ausgabe ohne Datenbankabfragen – kurze Ladezeiten.
Sicher
Token-Auth, CSRF-Schutz, Brute-Force-Sperre – solide Absicherung.
Flexibel
Themes, Fonts, Farben – alles konfigurierbar ü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.
Acht klar definierte Blocktypen.
Fertige CSS-Klassen statt Inline-Styles.
Dateibasiert – Backup per Kopie.
Komplett über die Styles-API steuerbar.
Maschinen können Inhalte vollständig 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 fertiggestellt.
Vollständige Inhaltspflege per API durch Maschinen-Systeme – Seiten erstellen, aktualisieren, löschen.
Seitenübergreifende Suche und automatische Backup-Versionen vor jedem Update.
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 und html. 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.
"Endlich ein CMS, das ich auch von meiner Maschine pflegen lassen kann. Klare Struktur, saubere API."
Web-Entwicklerin
"Leichtgewichtig, schnell aufgesetzt und die Blockstruktur macht Inhalte konsistent und wartbar."
Content-Manager
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
- maschinengenerierte 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 – entweder direkt über die API oder mit Maschinen-Unterstützung.