# Demo: HTML-Blöcke und Custom CSS im CMF

> Der HTML-Block in Aktion: Tabellen, Akkordeons, Tabs, Karten, Zeitleisten und Animationen mit den CSS-Klassen des CMF – als Live-Demo zum Nachbauen.

Kanonische URL: https://cmf.brosemedien.de/html

---

# HTML-Block

Freier Code, volle Kontrolle. Tabellen, Akkordeons, Animationen, Karten, Zeitleisten – alles, was HTML kann.

*Der mächtigste Blocktyp im CMF.*

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.

**Dieser Text kommt aus einem html-Block.** Kein text-Block, kein Wrapper – reines HTML, direkt ausgegeben.

## 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.

Design-System

### Ü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.

**Erfolgs-Hinweis**Aktion erfolgreich abgeschlossen. Alles hat funktioniert.

 **Hinweis**Das ist eine Information, die du dir merken solltest.

 **Warnung**Vorsicht – diese Aktion kann nicht rückgängig gemacht werden.

 **Fehler**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.

**panel**Weiche, getönte Fläche für ruhige Inhaltsgruppen ohne Signalwirkung – gut zum Bündeln zusammengehöriger Inhalte.

 **info-box**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](/news/content-security-policy-erklaert). 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.

 Strukturierte Inhalte95%

 API-Kompatibilität90%

 Maschinen-Lesbarkeit85%

 Wartbarkeit80%

## 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.

9
Blocktypen

 30
API-Aktionen

 0
Datenbanken

 10
Schriftfamilien

## 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.

1
**Seite anlegen**Per API oder Admin-Oberfläche eine neue Seite mit Titel und Slug erstellen.

 2
**Blöcke befüllen**Inhalte als heading-, text- und html-Blöcke strukturieren.

 3
**Prüfen**Vorschau kontrollieren – Struktur, Links und Darstellung.

 4
**Veröffentlichen**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.

✓**JSON-API**
Alle Inhalte lesen und schreiben per REST.

 ✓**Blockschema**
Neun klar definierte Blocktypen.

 ✓**Design-System**
Fertige CSS-Klassen statt Inline-Styles.

 ✓**Keine Datenbank**
Dateibasiert – Backup per Kopie.

 ✓**Themes & Farben**
Komplett über die Styles-API steuerbar.

 ✓**Pflege per API**
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.

März 2026

 CMF gestartet

 Grundstruktur, API, Blocktypen und Admin-Oberfläche entstehen – diese Website läuft von Anfang an darauf.

 April 2026

 Version 1.0 veröffentlicht

 Erstveröffentlichung, kurz darauf Theme-Editor, Custom CSS und zehn Schriftfamilien (1.1 und 1.2).

 Juni 2026

 Suche und Maschinen-Ausgaben

 1.11: statischer Suchindex für die Live-Suche. 1.12: jede Seite als Markdown, llms.txt, RSS-Feed und strukturierte Daten.

 Juli 2026

 Formular-Block

 1.15: Formulare mit Einsendungen im Admin und Spam-Schutz ohne Cookie. 1.16: Content-Security-Policy per site.json erweiterbar.

 September 2026

 Sichere Updates

 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.

Content Management Frame

### Inhalte strukturieren.Maschinen verstehen.

 Das CMF verbindet Menschen, Maschinen und Internet über eine gemeinsame Inhaltsstruktur.

 [Mehr erfahren](/philosophie)

## 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.

**Typischer Anwendungsfall: Hinweiszeile**
Icon, Beschreibung und Aktion in einer kompakten Zeile – z. B. für Newsletter, Downloads oder Kontakt.

 [Loslegen](/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.

.cmf-tabs input[type=radio]{display:none}
.cmf-tab-label{display:inline-block;padding:10px 18px;cursor:pointer;font-weight:600;border-bottom:2px solid transparent}
.cmf-tabs input:checked+.cmf-tab-label{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.cmf-tab-content{display:none;padding:20px 4px 4px}
#tab1:checked~.cmf-tab-panels #panel1,#tab2:checked~.cmf-tab-panels #panel2,#tab3:checked~.cmf-tab-panels #panel3{display:block}

 Übersicht

 Blocktypen

 API

 **CMF – Content Management Frame**
Ein dateibasiertes CMS mit klarer Blockstruktur, JSON-API und Unterstützung für maschinengestützte Inhaltspflege.

 9 Blocktypen stehen bereit: `heading`, `text`, `image`, `list`, `buttons`, `columns`, `html`, `blog_overview` und `form`. Der html-Block ist der flexibelste von allen.

 Die REST-API mit 30 Aktionen ermöglicht Seiten und Beiträge zu lesen, erstellen, aktualisieren und löschen – vollständig per JSON. Ideal für Maschinen, Build-Skripte und automatisierte Workflows.

## 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."*

 A
**Name**
Rolle

 ★★★★☆

 *"Ein zweites Beispielzitat. Die Sterne sind Zeichen im Text und lassen sich frei setzen."*

 B
**Name**
Rolle

## CSS-Animationen

`<style>`-Tags im html-Block ermöglichen vollständige CSS-Animationen – Keyframes, Transitions, Pulsieren, Drehen. Alles ohne JavaScript.

@keyframes cmf-pulse{50%{transform:scale(1.08);opacity:.85}}
@keyframes cmf-spin{to{transform:rotate(360deg)}}
@keyframes cmf-bounce{50%{transform:translateY(-10px)}}
.cmf-anim{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:center;text-align:center;padding:24px 0}
.cmf-anim-pulse{display:inline-block;padding:14px 24px;border-radius:999px;background:var(--color-primary);color:#fff;font-weight:700;animation:cmf-pulse 2s ease-in-out infinite}
.cmf-anim-spin{display:inline-block;width:44px;height:44px;border-radius:50%;border:4px solid var(--color-secondary);border-top-color:var(--color-primary);animation:cmf-spin 1.2s linear infinite}
.cmf-anim-dots span{display:inline-block;width:11px;height:11px;margin:0 3px;border-radius:50%;background:var(--color-primary);animation:cmf-bounce .9s ease-in-out infinite}
.cmf-anim-dots span:nth-child(2){background:var(--color-secondary);animation-delay:.15s}
.cmf-anim-dots span:nth-child(3){animation-delay:.3s}
.cmf-anim-label{margin-top:8px}

 Pulsieren

 Spinner

Bouncing Dots

## 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`.

✓ Fertig
 ◉ Beta
 ⟳ In Arbeit
 ✦ Neu
 ★ Premium
 ⊘ Veraltet

 #cms
 #api
 #blockbasiert
 #maschinenlesbar
 #open-end

## 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.

[Anleitungen](/anleitungen)[Zur Demo-Übersicht](/demos)