Alerts / Hinweise · FWT Dokumentation

Komponenten / Alerts

Alerts, Hinweise und Statusmeldungen

Alerts informieren Nutzer über wichtige Zustände: Erfolg, Fehler, Warnungen, Hinweise oder notwendige nächste Schritte.

FWT behandelt Alerts nicht nur als farbige Kästen. Ein guter Alert erklärt, was los ist, warum es wichtig ist und was der Nutzer tun kann.

Wichtig: Farbe unterstützt die Aussage. Die Bedeutung muss trotzdem im Text stehen.

Basis

Basis-Alert

Der Basis-Alert eignet sich für einfache Hinweise innerhalb einer Seite.

Live-Beispiel

Normaler Hinweis

Dies ist ein einfacher Hinweisbereich für zusätzliche Informationen.

HTML-Code anzeigen

<div class="fwt-alert">
    <h3 class="fwt-alert-title">Normaler Hinweis</h3>

    <p class="fwt-alert-text">
        Dies ist ein einfacher Hinweisbereich für zusätzliche Informationen.
    </p>
</div>

Varianten

Info, Erfolg, Warnung und Fehler

Die Farbvarianten helfen, unterschiedliche Meldungen schneller zu erfassen. Der Text bleibt trotzdem entscheidend.

Live-Beispiel

Information

Dieser Hinweis liefert neutrale Zusatzinformationen.

Erfolg

Die Aktion wurde erfolgreich abgeschlossen.

Warnung

Dieser Punkt sollte vor dem Fortfahren geprüft werden.

Fehler

Hier ist etwas schiefgelaufen und muss korrigiert werden.

HTML-Code anzeigen

<div class="fwt-card-grid fwt-card-grid-2">
    <div class="fwt-alert fwt-alert-info">
        <h3 class="fwt-alert-title">Information</h3>
        <p class="fwt-alert-text">Dieser Hinweis liefert neutrale Zusatzinformationen.</p>
    </div>

    <div class="fwt-alert fwt-alert-success">
        <h3 class="fwt-alert-title">Erfolg</h3>
        <p class="fwt-alert-text">Die Aktion wurde erfolgreich abgeschlossen.</p>
    </div>

    <div class="fwt-alert fwt-alert-warning">
        <h3 class="fwt-alert-title">Warnung</h3>
        <p class="fwt-alert-text">Dieser Punkt sollte vor dem Fortfahren geprüft werden.</p>
    </div>

    <div class="fwt-alert fwt-alert-danger">
        <h3 class="fwt-alert-title">Fehler</h3>
        <p class="fwt-alert-text">Hier ist etwas schiefgelaufen und muss korrigiert werden.</p>
    </div>
</div>

Solid

Kräftige Alert-Varianten

Solid Alerts sind deutlich auffälliger. Sie sollten sparsam eingesetzt werden, damit sie ihre Wirkung behalten.

Live-Beispiel

Primär

Ein kräftiger Hinweis für wichtige Meldungen.

Erfolg

Eine erfolgreiche Aktion mit stärkerer Wirkung.

Warnung

Ein auffälliger Warnhinweis.

Gefahr

Ein kritischer Hinweis für gefährliche Aktionen.

HTML-Code anzeigen

<div class="fwt-card-grid fwt-card-grid-2">
    <div class="fwt-alert fwt-alert-solid">
        <h3 class="fwt-alert-title">Primär</h3>
        <p class="fwt-alert-text">Ein kräftiger Hinweis für wichtige Meldungen.</p>
    </div>

    <div class="fwt-alert fwt-alert-solid fwt-alert-success">
        <h3 class="fwt-alert-title">Erfolg</h3>
        <p class="fwt-alert-text">Eine erfolgreiche Aktion mit stärkerer Wirkung.</p>
    </div>

    <div class="fwt-alert fwt-alert-solid fwt-alert-warning">
        <h3 class="fwt-alert-title">Warnung</h3>
        <p class="fwt-alert-text">Ein auffälliger Warnhinweis.</p>
    </div>

    <div class="fwt-alert fwt-alert-solid fwt-alert-danger">
        <h3 class="fwt-alert-title">Gefahr</h3>
        <p class="fwt-alert-text">Ein kritischer Hinweis für gefährliche Aktionen.</p>
    </div>
</div>

Icons

Alerts mit Icon

Icons können die Orientierung verbessern. Sie dürfen aber niemals die einzige Information sein.

Live-Beispiel

Hinweis mit Icon

Das Icon unterstützt die Bedeutung, ersetzt aber nicht den erklärenden Text.

Erfolgreich gespeichert

Die Änderungen wurden übernommen.

Bitte prüfen

Einige Angaben sollten vor dem Absenden kontrolliert werden.

HTML-Code anzeigen

<div class="fwt-alert fwt-alert-info fwt-alert-with-icon">
    <span class="fwt-alert-icon" aria-hidden="true">i</span>

    <div class="fwt-alert-body">
        <h3 class="fwt-alert-title">Hinweis mit Icon</h3>

        <p class="fwt-alert-text">
            Das Icon unterstützt die Bedeutung, ersetzt aber nicht den erklärenden Text.
        </p>
    </div>
</div>

<div class="fwt-alert fwt-alert-success fwt-alert-with-icon">
    <span class="fwt-alert-icon" aria-hidden="true">✓</span>

    <div class="fwt-alert-body">
        <h3 class="fwt-alert-title">Erfolgreich gespeichert</h3>

        <p class="fwt-alert-text">
            Die Änderungen wurden übernommen.
        </p>
    </div>
</div>

<div class="fwt-alert fwt-alert-warning fwt-alert-with-icon">
    <span class="fwt-alert-icon" aria-hidden="true">!</span>

    <div class="fwt-alert-body">
        <h3 class="fwt-alert-title">Bitte prüfen</h3>

        <p class="fwt-alert-text">
            Einige Angaben sollten vor dem Absenden kontrolliert werden.
        </p>
    </div>
</div>

Größen

Kompakte und große Alerts

Kompakte Alerts eignen sich für kleine Meldungen. Große Alerts können wichtige Erklärungen oder Einführungen stärker hervorheben.

Live-Beispiel

Kompakter Hinweis

Für kurze Meldungen direkt im Inhalt.

Großer Hinweisbereich

Große Alerts eignen sich für wichtige Erklärungen, Einführungen oder Hinweise, die mehr Gewicht brauchen.

HTML-Code anzeigen

<div class="fwt-alert fwt-alert-info fwt-alert-compact">
    <h3 class="fwt-alert-title">Kompakter Hinweis</h3>
    <p class="fwt-alert-text">Für kurze Meldungen direkt im Inhalt.</p>
</div>

<div class="fwt-alert fwt-alert-primary fwt-alert-large">
    <h3 class="fwt-alert-title">Großer Hinweisbereich</h3>

    <p class="fwt-alert-text">
        Große Alerts eignen sich für wichtige Erklärungen, Einführungen oder Hinweise,
        die mehr Gewicht brauchen.
    </p>
</div>

Aktionen

Alerts mit Aktionen

Manche Hinweise brauchen eine direkte Handlung. Die Aktion sollte klar benannt sein und nicht vom eigentlichen Hinweis ablenken.

Live-Beispiel

Cache-Version prüfen

Wenn Änderungen nicht sichtbar sind, wurde eventuell die CSS-Version noch nicht erhöht.

HTML-Code anzeigen

<div class="fwt-alert fwt-alert-warning">
    <div class="fwt-alert-header">
        <div>
            <h3 class="fwt-alert-title">Cache-Version prüfen</h3>

            <p class="fwt-alert-text">
                Wenn Änderungen nicht sichtbar sind, wurde eventuell die CSS-Version
                noch nicht erhöht.
            </p>
        </div>

        <button class="fwt-alert-close" type="button" aria-label="Hinweis schließen">
            ×
        </button>
    </div>

    <div class="fwt-alert-actions">
        <button class="fwt-btn fwt-btn-primary" type="button">Version erhöhen</button>
        <button class="fwt-btn fwt-btn-secondary" type="button">Später prüfen</button>
    </div>
</div>

Der Schließen-Button ist optisch vorbereitet. Das echte Schließen kann später per JavaScript ergänzt werden.

Callouts

Callouts für größere Hinweise

Callouts sind stärker als normale Alerts und eignen sich für erklärende Abschnitte, Datenschutz-Hinweise oder wichtige technische Informationen.

Live-Beispiel

Wichtiger Doku-Hinweis

Callouts eignen sich für größere Erklärbereiche, Datenschutz-Hinweise, technische Hinweise oder Abschnitte mit besonderem Gewicht.

Vor dem Löschen prüfen

Kritische Aktionen sollten gut erklärt werden. Nutzer müssen verstehen, was passiert und ob die Aktion rückgängig gemacht werden kann.

HTML-Code anzeigen

<div class="fwt-callout fwt-callout-primary">
    <h3 class="fwt-callout-title">Wichtiger Doku-Hinweis</h3>

    <p class="fwt-callout-text">
        Callouts eignen sich für größere Erklärbereiche, Datenschutz-Hinweise,
        technische Hinweise oder Abschnitte mit besonderem Gewicht.
    </p>
</div>

<div class="fwt-callout fwt-callout-warning">
    <h3 class="fwt-callout-title">Vor dem Löschen prüfen</h3>

    <p class="fwt-callout-text">
        Kritische Aktionen sollten gut erklärt werden. Nutzer müssen verstehen,
        was passiert und ob die Aktion rückgängig gemacht werden kann.
    </p>
</div>

Systemmeldungen

Kleine Systemmeldungen

Systemmeldungen eignen sich für Adminbereiche, Diagnosen, Uploads, Prüfungen oder kurze Statusausgaben.

Live-Beispiel

Systemcheck erfolgreich

Alle wichtigen Dateien wurden gefunden.

Hinweis

Eine optionale Datei fehlt noch.

Fehler

Die benötigte CSS-Datei wurde nicht geladen.

HTML-Code anzeigen

<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">Systemcheck erfolgreich</p>
        <p class="fwt-system-message-text">Alle wichtigen Dateien wurden gefunden.</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">Hinweis</p>
        <p class="fwt-system-message-text">Eine optionale Datei fehlt noch.</p>
    </div>
</div>

<div class="fwt-system-message fwt-system-message-danger">
    <span class="fwt-system-message-dot" aria-hidden="true"></span>

    <div class="fwt-system-message-content">
        <p class="fwt-system-message-title">Fehler</p>
        <p class="fwt-system-message-text">Die benötigte CSS-Datei wurde nicht geladen.</p>
    </div>
</div>

Barrierefreiheit

Alerts richtig verwenden

Nicht nur Farbe

Ein Fehler muss auch als Text erkennbar sein, nicht nur als roter Kasten.

<div class="fwt-alert fwt-alert-danger">Fehler...</div>

Klare Überschrift

Die Überschrift sollte sofort sagen, worum es geht.

<h3 class="fwt-alert-title">Bitte prüfen</h3>

Handlung nennen

Wenn Nutzer etwas tun müssen, sollte der Alert das klar erklären.

Bitte E-Mail-Adresse prüfen.

Icons nur unterstützend

Icons helfen optisch, ersetzen aber keine verständliche Meldung.

<span class="fwt-alert-icon" aria-hidden="true">!</span>

Sparsam einsetzen

Zu viele Alerts auf einer Seite machen wichtige Hinweise unsichtbar.

Weniger, aber klarer.

Später ARIA prüfen

Für dynamisch eingeblendete Meldungen können später ARIA-Live-Bereiche sinnvoll sein.

role="status" / aria-live