Blöcke / Abschnittsmuster · FWT Dokumentation

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.

Jetzt starten Beispiele ansehen

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.

Mehr erfahren Kontakt aufnehmen

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,%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%0A%20%20%20%20%3Cdefs%3E%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%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%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%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%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%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%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%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%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%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%0A%3C%2Fsvg%3E%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

Neu

Kontrast prüfen

Farben auf Lesbarkeit und Barrierearmut prüfen.

Kostenlos

Dateinamen bereinigen

Dateinamen für Web und Archiv sauber machen.

Beta

Generator

Später Bausteine komfortabel zusammenstellen.

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.

Muster nutzen Hinweise lesen

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>

Pakete

Paket- und Vergleichsblock

Paketblöcke eignen sich für Angebote, Leistungsstufen oder Funktionsvergleiche.

Live-Beispiel

Pakete

Vergleichbare Angebote übersichtlich darstellen

Kostenlos

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

Individuell

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.

Anfrage starten Mehr erfahren

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.