# CMF-Demos: Blöcke, Layouts und Medien live sehen

> Live-Beispiele aus dem CMF: Medien, HTML-Blöcke und Spalten-Layouts direkt auf der Seite – dazu fertige Websites, gebaut mit denselben Bausteinen.

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

---

# Demos

## Alles aus einem System

Blockbasiert, dateiorientiert, API-first. Inhalte strukturieren ohne Datenbank – schnell, portabel, versionierbar.

[Medien](/medien)[HTML](/html)[Spalten](/spalten)

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.

9
Blocktypen

2–5
Spalten je Block

0
Datenbanken

30
API-Aktionen

## Die drei Demo-Bereiche

![Helle Architektur-Spirale – Symbol für die Medien-Demo](/media/2026/06/demo-medien-07260e64.jpg)

### Medien

Bilder, Video, Audio und PDFs einbinden. Von einfachen Bildern über YouTube-Embeds bis zu eigenen MP4-Dateien und Audiospielern.

- [Medien-Demo](/medien)

![Weißes Geometrie-Detail – Symbol für die HTML-Demo](/media/2026/06/demo-html-1233431f.jpg)

### HTML-Blöcke

Freier HTML-Code, Callout-Boxen, Tabellen, Accordions, Animationen und eigene UI-Elemente – unbegrenzte Gestaltungsfreiheit.

- [HTML-Demo](/html)

![Weißes Tragwerk-Raster – Symbol für die Spalten-Demo](/media/2026/06/demo-spalten-38c451bb.jpg)

### Spalten & Layout

Mehrspaltige Layouts, Produktseiten, Feature-Listen, verschachtelte Spalten und responsives Verhalten bei kleinen Bildschirmen.

- [Spalten-Demo](/spalten)

## 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, HTML, Blog-Übersicht und Formular – das sind die neun Bausteine.

#### API-first

Inhalte lassen sich über eine JSON-API mit 30 Aktionen erstellen und bearbeiten. Mensch oder Maschine – 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

**ℹ Info**Der html-Block akzeptiert beliebiges HTML. So entstehen Info-Boxen, Warnungen oder Hervorhebungen.

**✓ Erfolg**Callout-Box für Bestätigungen, abgeschlossene Schritte oder positive Hinweise.

**⚠ Hinweis**Warnbox. Ideal für wichtige Hinweise, die beachtet werden sollten, aber kein Fehler sind.

**✕ Fehler**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 der Klasse `video-responsive` stellt das 16:9-Seitenverhältnis sicher und macht das Video auf allen Bildschirmgrößen responsiv.

- YouTube Embed-URL verwenden
- Wrapper-Klasse video-responsive für 16:9
- loading="lazy" spart Bandbreite
- Eigene MP4s: zuerst media_upload

### Fortschrittsbalken & Badges

Fortschrittsbalken (Beispielwerte):

HTML & CSS92%

JSON API85%

Responsives Layout78%

Status-Badges:

publisheddraftnewerrorarchived
Tag-Chips:

headingtextimagecolumnshtmllistbuttonsblog_overviewform

### Bild-Galerie mit columns-Block

![Grünes Blatt 1](/media/2026/03/blatt3-d6204eda.jpg)
*Bild 1*

![Grünes Blatt 2](/media/2026/03/blatt2-a039aec7.jpg)
*Bild 2*

![Grünes Blatt 3](/media/2026/03/blatt1-3a30ad09.jpg)
*Bild 3*

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

Block 1 – heading
Seitentitel setzen
Ein H1-Block pro Seite, sprechende Block-ID, klarer Titeltext.

Block 2 – text
Einleitung schreiben
HTML-Absätze, Links, `strong` und `em` innerhalb eines text-Blocks.

Block 3 – image
Bild einbinden
Erst hochladen via media_upload, dann den zurückgegebenen src-Pfad verwenden.

Block 4 – buttons
Call-to-Action platzieren
Primär- und Sekundär-Buttons mit label und href. Mehrere Buttons möglich.

## Mit CMF gebaut: echte Websites

Demos zeigen Bausteine – aber wie sieht eine fertige Website mit CMF aus? Diese Seiten laufen live auf dem System, jede mit komplett eigenem Design über die Theme-Einstellungen und eigenes Custom CSS.

[](https://signalwelt.de)

### [Signalwelt](https://signalwelt.de)

 Individuelle Signalgeräte für Information, Kommunikation und Musik. Komplett eigener Dark-Look mit Monospace-Akzenten – dieselben 9 Blocktypen, ein völlig anderes Gesicht. Inklusive Blog und Produktseiten.

 [signalwelt.de ansehen →](https://signalwelt.de)

 [](https://konzertplaner.brosemedien.de/)

### [Konzertplaner](https://konzertplaner.brosemedien.de/)

 Konzertprogramme gemeinsam planen: Songs ordnen, Tracks mit Markern anhören, Noten verwalten und das Programm per Link mit der Band teilen. Dunkles Blau mit Signalblau als Akzent – Open Source zum Selbst-Hosten.

 [Konzertplaner ansehen →](https://konzertplaner.brosemedien.de/)

[](/)

### [Diese Website](/)

 cmf.brosemedien.de selbst läuft natürlich auch auf CMF – inklusive aller Demos, der Anleitungen und des News-Bereichs. Was du hier siehst, ist das mitgelieferte Design-System.

 [Startseite ansehen →](/)

 [](https://funkfeld.brosemedien.de/)

### [Funkfeld](https://funkfeld.brosemedien.de/)

 Ein zentrales Organisations-Pult statt hundert einzelner Apps: Notizen, Aufgaben, Kalender, Mail, Live-Karte und Chat auf frei anordbaren Flächen, in Echtzeit fürs Team synchron. Dunkler Look mit orangem Akzent und eigener Display-Schrift.

 [Funkfeld ansehen →](https://funkfeld.brosemedien.de/)

[](https://xrechnung.brosemedien.de/)

### [XrechnungMega](https://xrechnung.brosemedien.de/)

 Normkonforme E-Rechnungen nach XRechnung (EN 16931) – als XML und als PDF, kostenlos zum Selbst-Hosten oder online im Account. Helles, sachliches Produktdesign mit Petrol-Akzent: dieselben Bausteine, ein ruhiger Auftritt.

 [XrechnungMega ansehen →](https://xrechnung.brosemedien.de/)

Deine Website läuft auch mit CMF? [Sag Bescheid](/kontakt) – wir nehmen sie gern in die Liste auf.

### 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 Spalten-Demo](/spalten)