Vorschauen · FWT Dokumentation

Muster / Vorschauen

Seitenvorschauen

Vorschauen zeigen zusammengesetzte Seitenbereiche. Sie sind größer als einzelne Blöcke und machen sichtbar, wie FWT in echten Webseiten, Tools, Dashboards oder Dokumentationen wirken kann.

Ziel ist der schnelle Aha-Effekt: Nicht nur „das ist eine Karte“, sondern „so könnte eine fertige Seite aussehen“.

Vorschauen sind keine vollständigen Seiten. Sie zeigen zusammengesetzte Ausschnitte.

Landingpage

Landingpage-Vorschau

Diese Vorschau kombiniert Header, Hero, Buttons, Badges und Karten zu einem Startseiten-Ausschnitt.

Live-Beispiel

https://example.de/landingpage

Freie Webtools

Landingpage-Vorschau

Eine Startseite, die sofort verständlich wirkt

Diese Vorschau kombiniert Header, Hero, Buttons, Badges und Featurekarten zu einem echten Seiteneindruck.

Jetzt starten Mehr erfahren

Neu

Schnell starten

Fertige Muster helfen beim Aufbau.

stabil

Saubere Basis

Komponenten und Muster greifen ineinander.

Doku

Gut erklärbar

Beispiele zeigen direkt die Wirkung.

HTML-Code anzeigen

<div class="fwt-preview-frame">
    <div class="fwt-preview-browserbar">
        <span class="fwt-preview-dots" aria-hidden="true">
            <span class="fwt-preview-dot"></span>
            <span class="fwt-preview-dot"></span>
            <span class="fwt-preview-dot"></span>
        </span>

        <span class="fwt-preview-address">https://example.de/landingpage</span>
    </div>

    <div class="fwt-preview-page fwt-preview-page-soft">
        <header class="fwt-preview-header">
            <div class="fwt-preview-brand">
                <span class="fwt-preview-logo" aria-hidden="true">F</span>
                <span>Freie Webtools</span>
            </div>

            <nav aria-label="Vorschau Navigation">
                <ul class="fwt-preview-menu">
                    <li><a class="is-active" href="#">Start</a></li>
                    <li><a href="#">Tools</a></li>
                    <li><a href="#">Doku</a></li>
                </ul>
            </nav>
        </header>

        <section class="fwt-preview-landing-hero">
            <p class="fwt-block-kicker">Landingpage-Vorschau</p>

            <h2 class="fwt-block-title">
                Eine Startseite, die sofort verständlich wirkt
            </h2>

            <p class="fwt-block-lead">
                Diese Vorschau kombiniert Header, Hero, Buttons, Badges und Featurekarten
                zu einem echten Seiteneindruck.
            </p>

            <div class="fwt-cta-actions">
                <a class="fwt-btn fwt-btn-primary" href="#">Jetzt starten</a>
                <a class="fwt-btn fwt-btn-secondary" href="#">Mehr erfahren</a>
            </div>
        </section>

        <section class="fwt-preview-landing-grid">
            <article class="fwt-card fwt-card-hover">
                <span class="fwt-badge fwt-badge-new">Neu</span>
                <h3 class="fwt-card-title">Schnell starten</h3>
                <p class="fwt-card-text">Fertige Muster helfen beim Aufbau.</p>
            </article>

            <article class="fwt-card fwt-card-hover">
                <span class="fwt-badge fwt-badge-success">stabil</span>
                <h3 class="fwt-card-title">Saubere Basis</h3>
                <p class="fwt-card-text">Komponenten und Muster greifen ineinander.</p>
            </article>

            <article class="fwt-card fwt-card-hover">
                <span class="fwt-badge fwt-badge-info">Doku</span>
                <h3 class="fwt-card-title">Gut erklärbar</h3>
                <p class="fwt-card-text">Beispiele zeigen direkt die Wirkung.</p>
            </article>
        </section>
    </div>
</div>

Toolseite

Toolseiten-Vorschau

Toolseiten brauchen Navigation, Eingaben, Ergebnisbereiche und klare Hinweise.

Live-Beispiel

https://example.de/tools/kontrast-check

Tool-Vorschau

Beta

Kontrast-Tool

Farben prüfen und verständlich bewerten

Eine Toolseite braucht Eingaben, Ergebnisbereich und klare Hinweise.

Textfarbe

Hintergrund

Ergebnis gut lesbar

Diese Vorschau zeigt, wie ein kleines Webtool aussehen könnte.

HTML-Code anzeigen

<div class="fwt-preview-frame">
    <div class="fwt-preview-browserbar">
        <span class="fwt-preview-dots" aria-hidden="true">
            <span class="fwt-preview-dot"></span>
            <span class="fwt-preview-dot"></span>
            <span class="fwt-preview-dot"></span>
        </span>

        <span class="fwt-preview-address">https://example.de/tools/kontrast-check</span>
    </div>

    <div class="fwt-preview-page fwt-preview-page-clean">
        <header class="fwt-preview-header">
            <div class="fwt-preview-brand">
                <span class="fwt-preview-logo" aria-hidden="true">T</span>
                <span>Tool-Vorschau</span>
            </div>

            <span class="fwt-badge fwt-badge-beta">Beta</span>
        </header>

        <div class="fwt-preview-tool-layout">
            <aside class="fwt-sidenav">
                <div class="fwt-sidenav-header">
                    <h3 class="fwt-sidenav-title">Tools</h3>
                    <p class="fwt-sidenav-text">Schnellzugriff auf Werkzeuge.</p>
                </div>

                <nav aria-label="Toolnavigation">
                    <ul class="fwt-sidenav-list">
                        <li><a class="fwt-sidenav-link is-active" href="#">Kontrast prüfen</a></li>
                        <li><a class="fwt-sidenav-link" href="#">Farben wählen</a></li>
                        <li><a class="fwt-sidenav-link" href="#">Code kopieren</a></li>
                    </ul>
                </nav>
            </aside>

            <main class="fwt-preview-tool-panel">
                <div>
                    <p class="fwt-block-kicker">Kontrast-Tool</p>

                    <h2 class="fwt-block-heading">
                        Farben prüfen und verständlich bewerten
                    </h2>

                    <p class="fwt-block-text">
                        Eine Toolseite braucht Eingaben, Ergebnisbereich und klare Hinweise.
                    </p>
                </div>

                <div class="fwt-form-row">
                    <div class="fwt-form-group">
                        <label class="fwt-label" for="preview-color-a">Textfarbe</label>
                        <input class="fwt-input" id="preview-color-a" type="text" value="#0f172a">
                    </div>

                    <div class="fwt-form-group">
                        <label class="fwt-label" for="preview-color-b">Hintergrund</label>
                        <input class="fwt-input" id="preview-color-b" type="text" value="#ffffff">
                    </div>
                </div>

                <div class="fwt-preview-tool-result">
                    <span class="fwt-status fwt-status-success">
                        <span class="fwt-status-dot" aria-hidden="true"></span>
                        Ergebnis gut lesbar
                    </span>

                    <p class="fwt-card-text">
                        Diese Vorschau zeigt, wie ein kleines Webtool aussehen könnte.
                    </p>
                </div>
            </main>
        </div>
    </div>
</div>

Dashboard

Admin-/Dashboard-Vorschau

Dashboard-Vorschauen zeigen Kennzahlen, Statusmeldungen und kompakte Verwaltungsbereiche.

Live-Beispiel

https://example.de/admin/dashboard

Admin Dashboard

online FWT

24

Bausteine

+4

8

Komponenten

stabil

3

Muster

neu

II

Ausblick

geplant

Letzte Aktionen

Komponenten abgeschlossen

Buttons, Cards, Alerts und Navigation stehen.

Muster ausbauen

Vorschauen und Musterseiten folgen als nächster Schritt.

HTML-Code anzeigen

<div class="fwt-preview-frame fwt-preview-frame-dark">
    <div class="fwt-preview-browserbar">
        <span class="fwt-preview-dots" aria-hidden="true">
            <span class="fwt-preview-dot"></span>
            <span class="fwt-preview-dot"></span>
            <span class="fwt-preview-dot"></span>
        </span>

        <span class="fwt-preview-address">https://example.de/admin/dashboard</span>
    </div>

    <div class="fwt-preview-page fwt-preview-page-dark">
        <section class="fwt-preview-dashboard">
            <header class="fwt-preview-header">
                <div class="fwt-preview-brand">
                    <span class="fwt-preview-logo" aria-hidden="true">A</span>
                    <span>Admin Dashboard</span>
                </div>

                <div class="fwt-badge-group">
                    <span class="fwt-badge fwt-badge-success">online</span>
                    <span class="fwt-badge fwt-badge-info">FWT</span>
                </div>
            </header>

            <div class="fwt-preview-dashboard-grid">
                <article class="fwt-card fwt-dashboard-card">
                    <p class="fwt-dashboard-value">24</p>
                    <p class="fwt-dashboard-label">Bausteine</p>
                    <span class="fwt-dashboard-trend">+4</span>
                </article>

                <article class="fwt-card fwt-dashboard-card">
                    <p class="fwt-dashboard-value">8</p>
                    <p class="fwt-dashboard-label">Komponenten</p>
                    <span class="fwt-dashboard-trend">stabil</span>
                </article>

                <article class="fwt-card fwt-dashboard-card">
                    <p class="fwt-dashboard-value">3</p>
                    <p class="fwt-dashboard-label">Muster</p>
                    <span class="fwt-dashboard-trend fwt-dashboard-trend-neutral">neu</span>
                </article>

                <article class="fwt-card fwt-dashboard-card">
                    <p class="fwt-dashboard-value">II</p>
                    <p class="fwt-dashboard-label">Ausblick</p>
                    <span class="fwt-dashboard-trend fwt-dashboard-trend-neutral">geplant</span>
                </article>
            </div>

            <div class="fwt-preview-dashboard-main">
                <article class="fwt-card">
                    <h3 class="fwt-card-title">Letzte Aktionen</h3>

                    <div class="fwt-system-message fwt-system-message-success">
                        <span class="fwt-system-message-dot" aria-hidden="true"></span>
                        <div class="fwt-system-message-content">
                            <p class="fwt-system-message-title">Komponenten abgeschlossen</p>
                            <p class="fwt-system-message-text">Buttons, Cards, Alerts und Navigation stehen.</p>
                        </div>
                    </div>

                    <div class="fwt-system-message fwt-system-message-warning">
                        <span class="fwt-system-message-dot" aria-hidden="true"></span>
                        <div class="fwt-system-message-content">
                            <p class="fwt-system-message-title">Muster ausbauen</p>
                            <p class="fwt-system-message-text">Vorschauen und Musterseiten folgen als nächster Schritt.</p>
                        </div>
                    </div>
                </article>

                <aside class="fwt-card fwt-rainbow-card">
                    <span class="fwt-rainbow-badge">Highlight</span>
                    <h3 class="fwt-card-title">FWT wirkt jetzt sichtbar</h3>
                    <p class="fwt-card-text">
                        Zusammengesetzte Vorschauen zeigen Laien viel schneller,
                        wie eine fertige Seite aussehen kann.
                    </p>
                </aside>
            </div>
        </section>
    </div>
</div>

Dokumentation

Doku-Seiten-Vorschau

Eine gute Doku-Seite kombiniert Navigation, Erklärung, Hinweise, Beispiele und klare Inhaltsbereiche.

Live-Beispiel

https://example.de/docs

Doku-Seite

Eine Dokumentation, die Beispiele sichtbar macht

Doku-Vorschauen zeigen, wie Kapitel, Hinweise, Code und Live-Beispiele später zusammen wirken können.

Hinweis

Gute Doku erklärt nicht nur Klassen, sondern zeigt direkt die Wirkung.

Live-Beispiele

Direkt sichtbar und kopierbar.

Hinweise

Kurze Erklärungen statt Fachchinesisch.

HTML-Code anzeigen

<div class="fwt-preview-frame">
    <div class="fwt-preview-browserbar">
        <span class="fwt-preview-dots" aria-hidden="true">
            <span class="fwt-preview-dot"></span>
            <span class="fwt-preview-dot"></span>
            <span class="fwt-preview-dot"></span>
        </span>

        <span class="fwt-preview-address">https://example.de/docs</span>
    </div>

    <div class="fwt-preview-page fwt-preview-page-clean">
        <div class="fwt-preview-doc-layout">
            <aside class="fwt-sidenav">
                <div class="fwt-sidenav-header">
                    <h3 class="fwt-sidenav-title">Dokumentation</h3>
                    <p class="fwt-sidenav-text">Bereiche und Kapitel.</p>
                </div>

                <nav aria-label="Doku-Vorschau">
                    <ul class="fwt-sidenav-list">
                        <li><a class="fwt-sidenav-link" href="#">Grundlagen</a></li>
                        <li><a class="fwt-sidenav-link" href="#">Komponenten</a></li>
                        <li><a class="fwt-sidenav-link is-active" href="#">Muster</a></li>
                    </ul>
                </nav>
            </aside>

            <main class="fwt-preview-doc-content">
                <p class="fwt-block-kicker">Doku-Seite</p>

                <h2 class="fwt-block-heading">
                    Eine Dokumentation, die Beispiele sichtbar macht
                </h2>

                <p class="fwt-block-text">
                    Doku-Vorschauen zeigen, wie Kapitel, Hinweise, Code und
                    Live-Beispiele später zusammen wirken können.
                </p>

                <div class="fwt-alert fwt-alert-info">
                    <h3 class="fwt-alert-title">Hinweis</h3>
                    <p class="fwt-alert-text">
                        Gute Doku erklärt nicht nur Klassen, sondern zeigt direkt die Wirkung.
                    </p>
                </div>

                <div class="fwt-card-grid fwt-card-grid-2">
                    <article class="fwt-card">
                        <h3 class="fwt-card-title">Live-Beispiele</h3>
                        <p class="fwt-card-text">Direkt sichtbar und kopierbar.</p>
                    </article>

                    <article class="fwt-card">
                        <h3 class="fwt-card-title">Hinweise</h3>
                        <p class="fwt-card-text">Kurze Erklärungen statt Fachchinesisch.</p>
                    </article>
                </div>
            </main>
        </div>
    </div>
</div>

Hinweise

Vorschauen richtig verwenden

Mehr Wirkung als Einzelteile

Vorschauen zeigen, wie mehrere FWT-Bausteine zusammen wirken.

Noch keine komplette Seite

Vorschauen sind Ausschnitte. Ganze Musterseiten kommen separat.

Für Laien wichtig

Viele Nutzer verstehen Gestaltung besser über fertige Wirkung.

Nicht überladen

Eine Vorschau soll inspirieren, nicht alle Möglichkeiten gleichzeitig zeigen.