Demos
Dieser Bereich zeigt, was das CMF in der Praxis kann – nicht nur beschrieben, sondern live auf dieser Seite. Die drei Unterseiten gehen tiefer in die jeweiligen Themen; hier bekommst du den direkten Überblick.
Die drei Demo-Bereiche
Medien
Bilder, Video, Audio und PDFs einbinden. Von einfachen Bildern über YouTube-Embeds bis zu eigenen MP4-Dateien und Audiospielern.
HTML-Blöcke
Freier HTML-Code, Callout-Boxen, Tabellen, Accordions, Animationen und eigene UI-Elemente – unbegrenzte Gestaltungsfreiheit.
Spalten & Layout
Mehrspaltige Layouts, Produktseiten, Feature-Listen, verschachtelte Spalten und responsives Verhalten bei kleinen Bildschirmen.
Live-Beispiele
Diese Elemente sind keine Screenshots – sie sind echte Blöcke, direkt auf dieser Seite eingebettet. Genau so funktioniert das CMF in der Praxis.
Feature-Grid mit columns-Block
Blockbasiert
Jeder Inhalt ist ein typisierter Block. Heading, Text, Image, List, Buttons, Columns und HTML – das sind die Bausteine.
API-first
Alle Inhalte werden über eine JSON-API erstellt und bearbeitet. Mensch oder KI – wer die API kennt, kann bauen.
Dateibasiert
Keine Datenbank, keine Migration. Inhalte liegen als JSON auf dem Server – leichtgewichtig und versionierbar.
Callout-Boxen mit html-Block
Der html-Block akzeptiert beliebiges HTML. So entstehen Info-Boxen, Warnungen oder Hervorhebungen.
Grüne Callout-Box. Geeignet für Bestätigungen, abgeschlossene Schritte oder positive Hinweise.
Gelbe Warnbox. Ideal für wichtige Hinweise, die beachtet werden sollten, aber kein Fehler sind.
Rote Fehlerbox. Für kritische Hinweise, fehlgeschlagene Aktionen oder Validierungsfehler.
Video-Embed mit columns-Block
YouTube & externe Videos
Videos von YouTube oder Vimeo werden per <iframe> in einem html-Block eingebettet. Der Wrapper mit padding-bottom: 56.25% stellt das 16:9-Seitenverhältnis sicher und macht das Video auf allen Bildschirmgrößen responsiv.
- YouTube Embed-URL verwenden
- position:relative + padding-bottom:56.25% für 16:9
- loading="lazy" spart Bandbreite
- Eigene MP4s: zuerst media_upload
Fortschrittsbalken & Badges
Status-Badges:
Tag-Chips:
Bild-Galerie mit columns-Block
Drei Bilder nebeneinander – aufgebaut mit einem columns-Block (3 Spalten) mit je einem image-Block pro Spalte. Auf kleinen Bildschirmen stapeln sie sich automatisch untereinander.
Zeitleiste mit html-Block
strong und em innerhalb eines text-Blocks.Bereit zum Bauen?
Die API ist bereit. Alle Blocktypen sind dokumentiert. Fang einfach an – entweder direkt über die API oder mit KI-Unterstützung.