Muster / Blöcke
Blöcke und fertige Abschnittsmuster
Muster sind größere Seitenabschnitte. Sie verbinden die bisherigen Komponenten zu nutzbaren Bereichen für Webseiten, Dokus, Tools, Landingpages und Adminoberflächen.
Ziel ist nicht, jede Seite gleich aussehen zu lassen. Die Muster sollen einen starken Startpunkt liefern, der später angepasst werden kann.
Wichtig: Muster sind fertige Abschnitte. Komponenten sind einzelne Bausteine.
Hero
Hero-Block
Der Hero-Block ist ein großer Einstiegsbereich für Startseiten, Toolseiten oder wichtige Landingpages.
Live-Beispiel
Freie Webtools
Fertige Bausteine für moderne Webseiten
FWT-Muster kombinieren Komponenten zu fertigen Abschnitten, die direkt in Webseiten, Tools oder Doku-Seiten eingesetzt werden können.
HTML-Code anzeigen
<section class="fwt-hero-block fwt-hero-block-center">
<div class="fwt-hero-block-content">
<p class="fwt-block-kicker">Freie Webtools</p>
<h2 class="fwt-block-title">
Fertige Bausteine für moderne Webseiten
</h2>
<p class="fwt-block-lead">
FWT-Muster kombinieren Komponenten zu fertigen Abschnitten,
die direkt in Webseiten, Tools oder Doku-Seiten eingesetzt werden können.
</p>
<div class="fwt-hero-block-actions">
<a class="fwt-btn fwt-btn-primary" href="#">Jetzt starten</a>
<a class="fwt-btn fwt-btn-secondary" href="#">Beispiele ansehen</a>
</div>
</div>
</section>Text / Medien
Text-/Medien-Block
Dieser Block kombiniert erklärenden Text mit einer Grafik, einem Bild oder einem Video.
Live-Beispiel
Text / Medien
Ein Abschnitt mit Text und Bild
Split-Blöcke eignen sich für Leistungsbereiche, Erklärungen, Projektvorstellungen oder Produktabschnitte.
HTML-Code anzeigen
<section class="fwt-split-block">
<div class="fwt-split-content">
<p class="fwt-block-kicker">Text / Medien</p>
<h2 class="fwt-block-heading">
Ein Abschnitt mit Text und Bild
</h2>
<p class="fwt-block-text">
Split-Blöcke eignen sich für Leistungsbereiche, Erklärungen,
Projektvorstellungen oder Produktabschnitte.
</p>
<div class="fwt-cta-actions">
<a class="fwt-btn fwt-btn-primary" href="#">Mehr erfahren</a>
<a class="fwt-btn fwt-btn-light" href="#">Kontakt aufnehmen</a>
</div>
</div>
<figure class="fwt-split-media fwt-split-media-cover">
<img src="data:image/svg+xml;utf8,%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0D%0A%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2248%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0D%0A%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22920%22%20cy%3D%22180%22%20r%3D%22120%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.25%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22210%22%20cy%3D%22590%22%20r%3D%22170%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M120%20600%20L340%20340%20L520%20500%20L700%20300%20L1080%20650%20L120%20650%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2258%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Muster%3C%2Ftext%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22178%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2230%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EAbschnittsmuster%20f%C3%BCr%20Webseiten%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E%0D%0A" alt="Abstrakte FWT-Demografik">
</figure>
</section>Features
Feature-Block
Feature-Blöcke zeigen Vorteile oder Eigenschaften übersichtlich nebeneinander.
Live-Beispiel
Features
Drei starke Vorteile sichtbar machen
Feature-Blöcke erklären kurz und übersichtlich, warum ein Angebot nützlich ist.
Klar
Gut lesbare Abschnitte mit eindeutiger Struktur.
Modular
Bausteine lassen sich kombinieren und erweitern.
Praxisnah
Muster orientieren sich an echten Webseiten.
HTML-Code anzeigen
<section class="fwt-feature-block">
<div class="fwt-block-head fwt-block-head-center">
<p class="fwt-block-kicker">Features</p>
<h2 class="fwt-block-heading">
Drei starke Vorteile sichtbar machen
</h2>
<p class="fwt-block-lead">
Feature-Blöcke erklären kurz und übersichtlich, warum ein Angebot
nützlich ist.
</p>
</div>
<div class="fwt-feature-grid">
<article class="fwt-feature-item">
<span class="fwt-feature-item-icon" aria-hidden="true">1</span>
<h3 class="fwt-feature-item-title">Klar</h3>
<p class="fwt-feature-item-text">Gut lesbare Abschnitte mit eindeutiger Struktur.</p>
</article>
<article class="fwt-feature-item">
<span class="fwt-feature-item-icon" aria-hidden="true">2</span>
<h3 class="fwt-feature-item-title">Modular</h3>
<p class="fwt-feature-item-text">Bausteine lassen sich kombinieren und erweitern.</p>
</article>
<article class="fwt-feature-item">
<span class="fwt-feature-item-icon" aria-hidden="true">3</span>
<h3 class="fwt-feature-item-title">Praxisnah</h3>
<p class="fwt-feature-item-text">Muster orientieren sich an echten Webseiten.</p>
</article>
</div>
</section>Tools
Tool- und Kachelblock
Tool-Kacheln eignen sich für Übersichtsseiten, Webtools, Downloads oder Bereichseinstiege.
Live-Beispiel
Tool-Kacheln
Einstieg in Werkzeuge oder Bereiche
HTML-Code anzeigen
<section class="fwt-tool-block">
<div class="fwt-block-head">
<p class="fwt-block-kicker">Tool-Kacheln</p>
<h2 class="fwt-block-heading">
Einstieg in Werkzeuge oder Bereiche
</h2>
</div>
<div class="fwt-tool-grid">
<a class="fwt-tool-tile" href="#">
<span class="fwt-badge fwt-badge-new">Neu</span>
<h3 class="fwt-tool-tile-title">Kontrast prüfen</h3>
<p class="fwt-tool-tile-text">Farben auf Lesbarkeit und Barrierearmut prüfen.</p>
</a>
<a class="fwt-tool-tile" href="#">
<span class="fwt-badge fwt-badge-free">Kostenlos</span>
<h3 class="fwt-tool-tile-title">Dateinamen bereinigen</h3>
<p class="fwt-tool-tile-text">Dateinamen für Web und Archiv sauber machen.</p>
</a>
<a class="fwt-tool-tile" href="#">
<span class="fwt-badge fwt-badge-beta">Beta</span>
<h3 class="fwt-tool-tile-title">Generator</h3>
<p class="fwt-tool-tile-text">Später Bausteine komfortabel zusammenstellen.</p>
</a>
</div>
</section>Statistik
Statistik-Block
Statistik-Blöcke zeigen Kennzahlen oder kurze Zusammenfassungen.
Live-Beispiel
7
Inhaltsbereiche
5
Formularseiten
8
Komponenten
II
Ausbau geplant
HTML-Code anzeigen
<section class="fwt-stats-block">
<article class="fwt-stat-item">
<p class="fwt-stat-value">7</p>
<p class="fwt-stat-label">Inhaltsbereiche</p>
</article>
<article class="fwt-stat-item">
<p class="fwt-stat-value">5</p>
<p class="fwt-stat-label">Formularseiten</p>
</article>
<article class="fwt-stat-item">
<p class="fwt-stat-value">8</p>
<p class="fwt-stat-label">Komponenten</p>
</article>
<article class="fwt-stat-item">
<p class="fwt-stat-value">II</p>
<p class="fwt-stat-label">Ausbau geplant</p>
</article>
</section>Ablauf
Schritt- und Ablaufblock
Schritt-Blöcke erklären Prozesse, Abläufe oder Arbeitsweisen.
Live-Beispiel
Grundlage wählen
Zuerst wird entschieden, welcher Abschnitt gebraucht wird.
Muster kopieren
Das passende HTML-Muster wird übernommen.
Inhalte anpassen
Texte, Links, Bilder und Aktionen werden ersetzt.
HTML-Code anzeigen
<section class="fwt-steps-block">
<article class="fwt-step-item">
<h3 class="fwt-step-title">Grundlage wählen</h3>
<p class="fwt-step-text">Zuerst wird entschieden, welcher Abschnitt gebraucht wird.</p>
</article>
<article class="fwt-step-item">
<h3 class="fwt-step-title">Muster kopieren</h3>
<p class="fwt-step-text">Das passende HTML-Muster wird übernommen.</p>
</article>
<article class="fwt-step-item">
<h3 class="fwt-step-title">Inhalte anpassen</h3>
<p class="fwt-step-text">Texte, Links, Bilder und Aktionen werden ersetzt.</p>
</article>
</section>Info
Info-Block
Info-Blöcke sind stärker als normale Alerts und eignen sich für größere Erklärbereiche.
Live-Beispiel
Wichtiger Hinweis
Muster sind Startpunkte, keine starren Vorlagen
Ein gutes Abschnittsmuster hilft beim Aufbau, muss aber immer zum Inhalt, zur Zielgruppe und zur Seite passen.
HTML-Code anzeigen
<section class="fwt-info-block">
<p class="fwt-block-kicker">Wichtiger Hinweis</p>
<h2 class="fwt-block-heading">
Muster sind Startpunkte, keine starren Vorlagen
</h2>
<p class="fwt-block-text">
Ein gutes Abschnittsmuster hilft beim Aufbau, muss aber immer zum Inhalt,
zur Zielgruppe und zur Seite passen.
</p>
<div class="fwt-cta-actions">
<a class="fwt-btn fwt-btn-primary" href="#">Muster nutzen</a>
<a class="fwt-btn fwt-btn-secondary" href="#">Hinweise lesen</a>
</div>
</section>Stimmen
Testimonial-Block
Testimonial-Blöcke zeigen Kundenstimmen oder Rückmeldungen und schaffen Vertrauen vor einer Handlungsaufforderung.
Live-Beispiel
Stimmen
Was andere über die Zusammenarbeit sagen
Klare Kommunikation und ein Ergebnis, das genau zu uns passt.
Anna Beispiel
Inhaberin, Musterbetrieb
Schnelle Umsetzung und immer nachvollziehbar erklärt.
Max Muster
Geschäftsführer, Beispiel GmbH
Ein Muster, auf das man sich sofort verlassen kann.
Lena Vorlage
Projektleitung
HTML-Code anzeigen
<section class="fwt-testimonial-block">
<div class="fwt-block-head fwt-block-head-center">
<p class="fwt-block-kicker">Stimmen</p>
<h2 class="fwt-block-heading">
Was andere über die Zusammenarbeit sagen
</h2>
</div>
<div class="fwt-testimonial-grid">
<article class="fwt-testimonial-card fwt-testimonial-card-highlight">
<p class="fwt-testimonial-quote">
Klare Kommunikation und ein Ergebnis, das genau zu uns passt.
</p>
<div class="fwt-testimonial-person">
<span class="fwt-testimonial-avatar" aria-hidden="true">A</span>
<div>
<p class="fwt-testimonial-name">Anna Beispiel</p>
<p class="fwt-testimonial-role">Inhaberin, Musterbetrieb</p>
</div>
</div>
</article>
<article class="fwt-testimonial-card">
<p class="fwt-testimonial-quote">
Schnelle Umsetzung und immer nachvollziehbar erklärt.
</p>
<div class="fwt-testimonial-person">
<span class="fwt-testimonial-avatar" aria-hidden="true">M</span>
<div>
<p class="fwt-testimonial-name">Max Muster</p>
<p class="fwt-testimonial-role">Geschäftsführer, Beispiel GmbH</p>
</div>
</div>
</article>
<article class="fwt-testimonial-card">
<p class="fwt-testimonial-quote">
Ein Muster, auf das man sich sofort verlassen kann.
</p>
<div class="fwt-testimonial-person">
<span class="fwt-testimonial-avatar" aria-hidden="true">L</span>
<div>
<p class="fwt-testimonial-name">Lena Vorlage</p>
<p class="fwt-testimonial-role">Projektleitung</p>
</div>
</div>
</article>
</div>
</section>Häufige Fragen
FAQ-Akkordeon
FAQ-Blöcke beantworten wiederkehrende Fragen knapp und platzsparend.
Dank gemeinsamem name-Attribut bleibt immer nur eine
Antwort gleichzeitig offen – ganz ohne JavaScript.
Live-Beispiel
Häufige Fragen
Kurz und klar beantwortet
Wie werden meine Daten verarbeitet?
Alle Angaben werden ausschließlich zur Bearbeitung der jeweiligen Anfrage genutzt und nicht an Dritte weitergegeben.
Kann ich ein Muster später noch anpassen?
Ja. Muster sind Startpunkte. Texte, Reihenfolge und Aktionen lassen sich jederzeit an das eigene Projekt anpassen.
Brauche ich JavaScript für das Akkordeon?
Nein. Das Auf- und Zuklappen läuft vollständig über natives HTML (details/summary mit gemeinsamem name-Attribut).
HTML-Code anzeigen
<section class="fwt-faq-block">
<div class="fwt-block-head fwt-block-head-center">
<p class="fwt-block-kicker">Häufige Fragen</p>
<h2 class="fwt-block-heading">
Kurz und klar beantwortet
</h2>
</div>
<details class="fwt-faq-item" name="fwt-faq-beispiel" open>
<summary class="fwt-faq-question">
Wie werden meine Daten verarbeitet?
<span class="fwt-faq-icon" aria-hidden="true">+</span>
</summary>
<p class="fwt-faq-answer">
Alle Angaben werden ausschließlich zur Bearbeitung der jeweiligen
Anfrage genutzt und nicht an Dritte weitergegeben.
</p>
</details>
<details class="fwt-faq-item" name="fwt-faq-beispiel">
<summary class="fwt-faq-question">
Kann ich ein Muster später noch anpassen?
<span class="fwt-faq-icon" aria-hidden="true">+</span>
</summary>
<p class="fwt-faq-answer">
Ja. Muster sind Startpunkte. Texte, Reihenfolge und Aktionen lassen
sich jederzeit an das eigene Projekt anpassen.
</p>
</details>
<details class="fwt-faq-item" name="fwt-faq-beispiel">
<summary class="fwt-faq-question">
Brauche ich JavaScript für das Akkordeon?
<span class="fwt-faq-icon" aria-hidden="true">+</span>
</summary>
<p class="fwt-faq-answer">
Nein. Das Auf- und Zuklappen läuft vollständig über natives HTML
(details/summary mit gemeinsamem name-Attribut).
</p>
</details>
</section>Über uns
Team-/Über-uns-Block
Team-Blöcke stellen Personen mit Foto, Rolle, kurzer Beschreibung und optionalen Kontakt-Links vor.
Live-Beispiel
Über uns
Die Menschen hinter dem Projekt
Anna Beispiel
Gründerin & Konzept
Verantwortet Strategie, Kundenkontakt und die Grundidee hinter FWT.
Max Muster
Entwicklung
Baut und pflegt die technische Grundlage von FWT und den Tools.
Lena Vorlage
Projektleitung
Koordiniert Projekte und behält Termine und Details im Blick.
HTML-Code anzeigen
<section class="fwt-team-block">
<div class="fwt-block-head fwt-block-head-center">
<p class="fwt-block-kicker">Über uns</p>
<h2 class="fwt-block-heading">
Die Menschen hinter dem Projekt
</h2>
</div>
<div class="fwt-team-grid">
<article class="fwt-team-card">
<figure class="fwt-team-photo">
<img src="data:image/svg+xml;utf8,%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0D%0A%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2248%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0D%0A%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22920%22%20cy%3D%22180%22%20r%3D%22120%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.25%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22210%22%20cy%3D%22590%22%20r%3D%22170%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M120%20600%20L340%20340%20L520%20500%20L700%20300%20L1080%20650%20L120%20650%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2258%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Muster%3C%2Ftext%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22178%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2230%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EAbschnittsmuster%20f%C3%BCr%20Webseiten%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E%0D%0A" alt="Porträt von Anna Beispiel">
</figure>
<div>
<p class="fwt-team-name">Anna Beispiel</p>
<p class="fwt-team-role">Gründerin & Konzept</p>
</div>
<p class="fwt-team-bio">
Verantwortet Strategie, Kundenkontakt und die Grundidee hinter FWT.
</p>
<div class="fwt-team-social">
<a class="fwt-team-social-link" href="#" aria-label="E-Mail an Anna Beispiel">✉</a>
<a class="fwt-team-social-link" href="#" aria-label="Anna Beispiel auf LinkedIn">in</a>
<a class="fwt-team-social-link" href="#" aria-label="Webseite von Anna Beispiel">🌐</a>
</div>
</article>
<article class="fwt-team-card">
<figure class="fwt-team-photo">
<img src="data:image/svg+xml;utf8,%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0D%0A%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2248%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0D%0A%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22920%22%20cy%3D%22180%22%20r%3D%22120%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.25%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22210%22%20cy%3D%22590%22%20r%3D%22170%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M120%20600%20L340%20340%20L520%20500%20L700%20300%20L1080%20650%20L120%20650%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2258%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Muster%3C%2Ftext%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22178%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2230%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EAbschnittsmuster%20f%C3%BCr%20Webseiten%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E%0D%0A" alt="Porträt von Max Muster">
</figure>
<div>
<p class="fwt-team-name">Max Muster</p>
<p class="fwt-team-role">Entwicklung</p>
</div>
<p class="fwt-team-bio">
Baut und pflegt die technische Grundlage von FWT und den Tools.
</p>
<div class="fwt-team-social">
<a class="fwt-team-social-link" href="#" aria-label="E-Mail an Max Muster">✉</a>
<a class="fwt-team-social-link" href="#" aria-label="Max Muster auf LinkedIn">in</a>
</div>
</article>
<article class="fwt-team-card">
<figure class="fwt-team-photo">
<img src="data:image/svg+xml;utf8,%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0D%0A%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2248%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0D%0A%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22920%22%20cy%3D%22180%22%20r%3D%22120%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.25%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22210%22%20cy%3D%22590%22%20r%3D%22170%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M120%20600%20L340%20340%20L520%20500%20L700%20300%20L1080%20650%20L120%20650%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2258%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Muster%3C%2Ftext%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22178%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2230%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EAbschnittsmuster%20f%C3%BCr%20Webseiten%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E%0D%0A" alt="Porträt von Lena Vorlage">
</figure>
<div>
<p class="fwt-team-name">Lena Vorlage</p>
<p class="fwt-team-role">Projektleitung</p>
</div>
<p class="fwt-team-bio">
Koordiniert Projekte und behält Termine und Details im Blick.
</p>
<div class="fwt-team-social">
<a class="fwt-team-social-link" href="#" aria-label="E-Mail an Lena Vorlage">✉</a>
</div>
</article>
</div>
</section>Magazin
Blog-/Magazin-Übersicht
Kombiniert das bestehende Kartenraster mit einer neuen Beitragskarte (Titelbild, Kategorie, Datum, Anrisstext) zu einer Blog- oder Magazin-Übersicht.
Live-Beispiel
Magazin
Aktuelle Beiträge
Warum Muster schneller ans Ziel bringen
Fertige Abschnitte sparen Zeit, ohne die Seite austauschbar zu machen.
Kontraste, die wirklich funktionieren
Gute Lesbarkeit beginnt lange vor der fertigen Webseite.
Vom Baustein zur ganzen Seite
Wie einzelne Komponenten zu vollständigen Musterseiten werden.
HTML-Code anzeigen
<section class="fwt-blog-block">
<div class="fwt-block-head fwt-block-head-center">
<p class="fwt-block-kicker">Magazin</p>
<h2 class="fwt-block-heading">
Aktuelle Beiträge
</h2>
</div>
<div class="fwt-card-grid fwt-card-grid-3">
<article class="fwt-card fwt-card-hover fwt-post-card">
<figure class="fwt-post-card-cover">
<img src="data:image/svg+xml;utf8,%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0D%0A%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2248%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0D%0A%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22920%22%20cy%3D%22180%22%20r%3D%22120%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.25%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22210%22%20cy%3D%22590%22%20r%3D%22170%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M120%20600%20L340%20340%20L520%20500%20L700%20300%20L1080%20650%20L120%20650%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2258%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Muster%3C%2Ftext%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22178%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2230%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EAbschnittsmuster%20f%C3%BCr%20Webseiten%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E%0D%0A" alt="">
</figure>
<div class="fwt-post-card-body">
<div class="fwt-post-meta">
<span class="fwt-badge fwt-badge-info">Muster</span>
<span class="fwt-card-meta">12. Juni 2026</span>
</div>
<h3 class="fwt-card-title">Warum Muster schneller ans Ziel bringen</h3>
<p class="fwt-card-text">
Fertige Abschnitte sparen Zeit, ohne die Seite austauschbar zu machen.
</p>
</div>
</article>
<article class="fwt-card fwt-card-hover fwt-post-card">
<figure class="fwt-post-card-cover">
<img src="data:image/svg+xml;utf8,%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0D%0A%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2248%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0D%0A%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22920%22%20cy%3D%22180%22%20r%3D%22120%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.25%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22210%22%20cy%3D%22590%22%20r%3D%22170%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M120%20600%20L340%20340%20L520%20500%20L700%20300%20L1080%20650%20L120%20650%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2258%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Muster%3C%2Ftext%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22178%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2230%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EAbschnittsmuster%20f%C3%BCr%20Webseiten%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E%0D%0A" alt="">
</figure>
<div class="fwt-post-card-body">
<div class="fwt-post-meta">
<span class="fwt-badge fwt-badge-success">Barrierearm</span>
<span class="fwt-card-meta">3. Juni 2026</span>
</div>
<h3 class="fwt-card-title">Kontraste, die wirklich funktionieren</h3>
<p class="fwt-card-text">
Gute Lesbarkeit beginnt lange vor der fertigen Webseite.
</p>
</div>
</article>
<article class="fwt-card fwt-card-hover fwt-post-card">
<figure class="fwt-post-card-cover">
<img src="data:image/svg+xml;utf8,%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0D%0A%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2248%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0D%0A%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22920%22%20cy%3D%22180%22%20r%3D%22120%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.25%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22210%22%20cy%3D%22590%22%20r%3D%22170%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M120%20600%20L340%20340%20L520%20500%20L700%20300%20L1080%20650%20L120%20650%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2258%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Muster%3C%2Ftext%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22178%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2230%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EAbschnittsmuster%20f%C3%BCr%20Webseiten%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E%0D%0A" alt="">
</figure>
<div class="fwt-post-card-body">
<div class="fwt-post-meta">
<span class="fwt-badge fwt-badge-creative">Projekt</span>
<span class="fwt-card-meta">28. Mai 2026</span>
</div>
<h3 class="fwt-card-title">Vom Baustein zur ganzen Seite</h3>
<p class="fwt-card-text">
Wie einzelne Komponenten zu vollständigen Musterseiten werden.
</p>
</div>
</article>
</div>
</section>Muster
Blog-Artikel
Kombiniert Artikel-Kopf und Titelbild mit dem bestehenden
.fwt-layout-blog-Raster und .fwt-prose
für den Fließtext, ergänzt um eine Sidebar mit Kategorien und
weiteren Beiträgen.
Live-Beispiel
Muster
Vom Baustein zur ganzen Seite
Einzelne Komponenten wie Buttons, Cards oder Badges wirken erst dann richtig, wenn sie zu größeren Abschnitten zusammenfinden.
Vom Baustein zum Muster
Ein Muster kombiniert mehrere Komponenten zu einem Abschnitt mit klarer Aufgabe – etwa einem Hero-Bereich oder einer Beitragskarte.
Vom Muster zur Seite
Mehrere Muster hintereinander ergeben eine vollständige Seite. Wichtig bleibt: Reihenfolge und Inhalt müssen zum Projekt passen.
HTML-Code anzeigen
<article class="fwt-post-article">
<header class="fwt-post-header">
<p class="fwt-block-kicker">Muster</p>
<h1 class="fwt-h1">Vom Baustein zur ganzen Seite</h1>
<p class="fwt-post-header-meta">
<span>Von Anna Beispiel</span>
<span aria-hidden="true">·</span>
<span>12. Juni 2026</span>
<span aria-hidden="true">·</span>
<span>4 Min. Lesezeit</span>
</p>
</header>
<figure class="fwt-post-cover">
<img src="data:image/svg+xml;utf8,%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0D%0A%20%20%20%20%3Cdefs%3E%0D%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2248%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0D%0A%20%20%20%20%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22920%22%20cy%3D%22180%22%20r%3D%22120%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.25%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22210%22%20cy%3D%22590%22%20r%3D%22170%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M120%20600%20L340%20340%20L520%20500%20L700%20300%20L1080%20650%20L120%20650%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2258%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Muster%3C%2Ftext%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22178%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2230%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EAbschnittsmuster%20f%C3%BCr%20Webseiten%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E%0D%0A" alt="">
</figure>
<div class="fwt-layout-blog">
<div class="fwt-prose">
<p>
Einzelne Komponenten wie Buttons, Cards oder Badges wirken erst
dann richtig, wenn sie zu größeren Abschnitten zusammenfinden.
</p>
<h2>Vom Baustein zum Muster</h2>
<p>
Ein Muster kombiniert mehrere Komponenten zu einem Abschnitt mit
klarer Aufgabe – etwa einem Hero-Bereich oder einer Beitragskarte.
</p>
<h2>Vom Muster zur Seite</h2>
<p>
Mehrere Muster hintereinander ergeben eine vollständige Seite.
Wichtig bleibt: Reihenfolge und Inhalt müssen zum Projekt passen.
</p>
</div>
<aside class="fwt-post-sidebar">
<div class="fwt-card">
<h3 class="fwt-card-title">Kategorien</h3>
<ul class="fwt-list-unstyled">
<li><a class="fwt-link-muted" href="#">Muster</a></li>
<li><a class="fwt-link-muted" href="#">Barrierearm</a></li>
<li><a class="fwt-link-muted" href="#">Projekt</a></li>
</ul>
</div>
<div class="fwt-card">
<h3 class="fwt-card-title">Neueste Beiträge</h3>
<ul class="fwt-list-unstyled">
<li><a class="fwt-link-muted" href="#">Warum Muster schneller ans Ziel bringen</a></li>
<li><a class="fwt-link-muted" href="#">Kontraste, die wirklich funktionieren</a></li>
</ul>
</div>
</aside>
</div>
</article>Pakete
Paket- und Vergleichsblock
Paketblöcke eignen sich für Angebote, Leistungsstufen oder Funktionsvergleiche.
Live-Beispiel
Pakete
Vergleichbare Angebote übersichtlich darstellen
Basis
Für einfache Seiten und erste Tests.
- Grundklassen
- Doku-Beispiele
- lokal nutzbar
Erweitert
Für größere Seiten und mehr Komfort.
- mehr Muster
- Komfortfunktionen
- erweiterbare Struktur
Maßarbeit
Für angepasste Kundenlösungen.
- eigene Farben
- eigene Komponenten
- Dokumentation
HTML-Code anzeigen
<section class="fwt-package-block">
<div class="fwt-block-head fwt-block-head-center">
<p class="fwt-block-kicker">Pakete</p>
<h2 class="fwt-block-heading">
Vergleichbare Angebote übersichtlich darstellen
</h2>
</div>
<div class="fwt-package-grid">
<article class="fwt-package-card">
<span class="fwt-badge fwt-badge-free">Kostenlos</span>
<h3 class="fwt-card-title">Basis</h3>
<p class="fwt-card-text">Für einfache Seiten und erste Tests.</p>
<ul class="fwt-feature-list">
<li>Grundklassen</li>
<li>Doku-Beispiele</li>
<li>lokal nutzbar</li>
</ul>
</article>
<article class="fwt-package-card fwt-package-card-highlight">
<span class="fwt-badge fwt-badge-pro">Empfohlen</span>
<h3 class="fwt-card-title">Erweitert</h3>
<p class="fwt-card-text">Für größere Seiten und mehr Komfort.</p>
<ul class="fwt-feature-list">
<li>mehr Muster</li>
<li>Komfortfunktionen</li>
<li>erweiterbare Struktur</li>
</ul>
</article>
<article class="fwt-package-card">
<span class="fwt-badge fwt-badge-creative">Individuell</span>
<h3 class="fwt-card-title">Maßarbeit</h3>
<p class="fwt-card-text">Für angepasste Kundenlösungen.</p>
<ul class="fwt-feature-list">
<li>eigene Farben</li>
<li>eigene Komponenten</li>
<li>Dokumentation</li>
</ul>
</article>
</div>
</section>Abschluss
Abschluss-CTA
Abschlussblöcke führen Nutzer am Ende einer Seite zur nächsten Handlung.
Live-Beispiel
Abschluss
Bereit für den nächsten Schritt?
Abschlussblöcke eignen sich für Seitenenden, Downloads, Kontaktbereiche oder starke Handlungsaufforderungen.
HTML-Code anzeigen
<section class="fwt-final-block">
<p class="fwt-block-kicker">Abschluss</p>
<h2 class="fwt-block-title">
Bereit für den nächsten Schritt?
</h2>
<p class="fwt-block-lead">
Abschlussblöcke eignen sich für Seitenenden, Downloads, Kontaktbereiche
oder starke Handlungsaufforderungen.
</p>
<div class="fwt-final-actions">
<a class="fwt-btn fwt-btn-primary" href="#">Anfrage starten</a>
<a class="fwt-btn fwt-btn-secondary" href="#">Mehr erfahren</a>
</div>
</section>Hinweise
Muster richtig verwenden
Nicht blind kopieren
Muster sind Startpunkte. Texte, Reihenfolge und Aktionen müssen zum Projekt passen.
Eine klare Aufgabe
Jeder Abschnitt sollte eine erkennbare Aufgabe erfüllen.
Nicht überladen
Zu viele Buttons, Badges oder Karten machen einen Abschnitt schwächer.
Mobil prüfen
Große Abschnitte müssen auf kleinen Bildschirmen gut lesbar bleiben.
Barrierearm denken
Überschriften, Linktexte, Kontraste und Fokuszustände bleiben wichtig.
Wiederverwendbar halten
Muster sollen später für Chasalla.de, FWT und Kundenprojekte nutzbar sein.