Direkt zum Inhalt springen

Freie Webtools

Dokumentation

Aufbau, Einbindung und Beispiele für das FWT-System. Verständlich erklärt, sichtbar gezeigt und direkt nutzbar.

CSS-System Dokumentation Datenschutzfreundlich

Komponenten / Badges

Badges, Labels und Statuskennzeichen

Badges sind kleine Kennzeichen für Status, Kategorien, Versionen, Hinweise oder Zähler. Sie helfen Nutzern, Informationen schneller zu erfassen.

FWT nutzt Badges nicht als reine Dekoration, sondern als kleine Orientierungshilfen für Karten, Tabellen, Navigationen, Dashboards und Adminbereiche.

Wichtig: Ein Badge darf Bedeutung unterstützen, aber nicht allein über Farbe erklären. Der Text im Badge muss verständlich sein.

Basis

Basis-Badges

Basis-Badges eignen sich für kurze neutrale Kennzeichnungen.

Live-Beispiel
Standard Klein Groß Pill
HTML-Code anzeigen 
<div class="fwt-badge-group">
    <span class="fwt-badge">Standard</span>
    <span class="fwt-badge fwt-badge-sm">Klein</span>
    <span class="fwt-badge fwt-badge-lg">Groß</span>
    <span class="fwt-badge fwt-badge-pill">Pill</span>
</div>

Farben

Farbvarianten

Farbvarianten machen unterschiedliche Bedeutungen schneller sichtbar: Information, Erfolg, Warnung, Fehler oder besondere Kennzeichnung.

Live-Beispiel
Primary Info Erfolg Warnung Fehler Kreativ Neutral
HTML-Code anzeigen 
<div class="fwt-badge-group">
    <span class="fwt-badge fwt-badge-primary">Primary</span>
    <span class="fwt-badge fwt-badge-info">Info</span>
    <span class="fwt-badge fwt-badge-success">Erfolg</span>
    <span class="fwt-badge fwt-badge-warning">Warnung</span>
    <span class="fwt-badge fwt-badge-danger">Fehler</span>
    <span class="fwt-badge fwt-badge-creative">Kreativ</span>
    <span class="fwt-badge fwt-badge-muted">Neutral</span>
</div>

Solid / Outline

Solid- und Outline-Badges

Solid-Badges wirken kräftiger. Outline-Badges sind zurückhaltender und eignen sich für ruhigere Oberflächen.

Live-Beispiel

Solid

Primary Erfolg Warnung Fehler

Outline

Primary Erfolg Warnung Fehler
HTML-Code anzeigen 
<div class="fwt-card-grid fwt-card-grid-2">
    <div class="fwt-card">
        <h3 class="fwt-card-title">Solid</h3>

        <div class="fwt-badge-group">
            <span class="fwt-badge fwt-badge-solid">Primary</span>
            <span class="fwt-badge fwt-badge-solid fwt-badge-success">Erfolg</span>
            <span class="fwt-badge fwt-badge-solid fwt-badge-warning">Warnung</span>
            <span class="fwt-badge fwt-badge-solid fwt-badge-danger">Fehler</span>
        </div>
    </div>

    <div class="fwt-card">
        <h3 class="fwt-card-title">Outline</h3>

        <div class="fwt-badge-group">
            <span class="fwt-badge fwt-badge-outline fwt-badge-primary">Primary</span>
            <span class="fwt-badge fwt-badge-outline fwt-badge-success">Erfolg</span>
            <span class="fwt-badge fwt-badge-outline fwt-badge-warning">Warnung</span>
            <span class="fwt-badge fwt-badge-outline fwt-badge-danger">Fehler</span>
        </div>
    </div>
</div>

Statuspunkte

Statuspunkt mit Text

Statuspunkte sind sinnvoll, wenn ein Zustand sehr kompakt angezeigt werden soll. Der Text ist dabei entscheidend.

Live-Beispiel
Aktiv

Der Eintrag ist sichtbar und nutzbar.

Prüfung offen

Der Eintrag sollte noch kontrolliert werden.

Fehler

Der Eintrag enthält ein Problem.

HTML-Code anzeigen 
<div class="fwt-card-grid fwt-card-grid-3">
    <div class="fwt-card">
        <span class="fwt-status fwt-status-success">
            <span class="fwt-status-dot" aria-hidden="true"></span>
            Aktiv
        </span>

        <p class="fwt-card-text">
            Der Eintrag ist sichtbar und nutzbar.
        </p>
    </div>

    <div class="fwt-card">
        <span class="fwt-status fwt-status-warning">
            <span class="fwt-status-dot" aria-hidden="true"></span>
            Prüfung offen
        </span>

        <p class="fwt-card-text">
            Der Eintrag sollte noch kontrolliert werden.
        </p>
    </div>

    <div class="fwt-card">
        <span class="fwt-status fwt-status-danger">
            <span class="fwt-status-dot" aria-hidden="true"></span>
            Fehler
        </span>

        <p class="fwt-card-text">
            Der Eintrag enthält ein Problem.
        </p>
    </div>
</div>

Zähler

Zähler-Badges

Zähler-Badges eignen sich für Nachrichten, Aufgaben, Treffer, offene Punkte oder kleine Kennzahlen.

Live-Beispiel
12 4 2 1 0
HTML-Code anzeigen 
<div class="fwt-badge-group">
    <span class="fwt-badge fwt-badge-count fwt-badge-primary">12</span>
    <span class="fwt-badge fwt-badge-count fwt-badge-success">4</span>
    <span class="fwt-badge fwt-badge-count fwt-badge-warning">2</span>
    <span class="fwt-badge fwt-badge-count fwt-badge-danger">1</span>
    <span class="fwt-badge fwt-badge-count fwt-badge-count-empty">0</span>
</div>

Gruppen

Badge-Gruppen und Label-Zeilen

Mehrere Badges können als Gruppe oder in einer Label-Zeile kombiniert werden.

Live-Beispiel

Projektstatus

aktiv Doku prüfen

Badge-Gruppen eignen sich für Kategorien, Status, Versionen oder kurze Kennzeichen.

HTML-Code anzeigen 
<div class="fwt-card">
    <div class="fwt-label-row fwt-label-row-between">
        <h3 class="fwt-label-row-title">
            Projektstatus
        </h3>

        <div class="fwt-badge-group">
            <span class="fwt-badge fwt-badge-success">aktiv</span>
            <span class="fwt-badge fwt-badge-info">Doku</span>
            <span class="fwt-badge fwt-badge-warning">prüfen</span>
        </div>
    </div>

    <p class="fwt-card-text">
        Badge-Gruppen eignen sich für Kategorien, Status, Versionen oder kurze Kennzeichen.
    </p>
</div>

Spezial

Spezial-Badges

Häufige Kennzeichen wie Neu, Beta, Pro, Kostenlos oder Veraltet bekommen eigene Klassen.

Live-Beispiel
Neu Beta Pro Kostenlos Veraltet
HTML-Code anzeigen 
<div class="fwt-badge-group">
    <span class="fwt-badge fwt-badge-new">Neu</span>
    <span class="fwt-badge fwt-badge-beta">Beta</span>
    <span class="fwt-badge fwt-badge-pro">Pro</span>
    <span class="fwt-badge fwt-badge-free">Kostenlos</span>
    <span class="fwt-badge fwt-badge-deprecated">Veraltet</span>
</div>

Icons

Badges mit Icon

Icons können helfen, ein Badge schneller zu erfassen. Sie ersetzen aber keinen verständlichen Text.

Live-Beispiel
Geprüft Achtung Hinweis Fehler
HTML-Code anzeigen 
<div class="fwt-badge-group">
    <span class="fwt-badge fwt-badge-success">
        <span class="fwt-badge-icon" aria-hidden="true">✓</span>
        Geprüft
    </span>

    <span class="fwt-badge fwt-badge-warning">
        <span class="fwt-badge-icon" aria-hidden="true">!</span>
        Achtung
    </span>

    <span class="fwt-badge fwt-badge-info">
        <span class="fwt-badge-icon" aria-hidden="true">i</span>
        Hinweis
    </span>

    <span class="fwt-badge fwt-badge-danger">
        <span class="fwt-badge-icon" aria-hidden="true">×</span>
        Fehler
    </span>
</div>

Karten

Badges in Karten

In Karten zeigen Badges Status, Kategorie, Version oder besondere Hinweise.

Live-Beispiel
Neu 3

MiniEditor

Sicherer Textarea-basierter Editor mit Toolbar und Vorschau.

Beta prüfen

Multiselect

Komfortvariante für Release II vorbereitet.

Pro aktiv

Dashboard

Kennzahlen und Status in Kartenform darstellen.

HTML-Code anzeigen 
<div class="fwt-card-grid fwt-card-grid-3">
    <article class="fwt-card fwt-card-hover">
        <div class="fwt-label-row fwt-label-row-between">
            <span class="fwt-badge fwt-badge-new">Neu</span>
            <span class="fwt-badge fwt-badge-count fwt-badge-primary">3</span>
        </div>

        <h3 class="fwt-card-title">MiniEditor</h3>

        <p class="fwt-card-text">
            Sicherer Textarea-basierter Editor mit Toolbar und Vorschau.
        </p>
    </article>

    <article class="fwt-card fwt-card-hover">
        <div class="fwt-label-row fwt-label-row-between">
            <span class="fwt-badge fwt-badge-beta">Beta</span>
            <span class="fwt-status fwt-status-warning">
                <span class="fwt-status-dot" aria-hidden="true"></span>
                prüfen
            </span>
        </div>

        <h3 class="fwt-card-title">Multiselect</h3>

        <p class="fwt-card-text">
            Komfortvariante für Release II vorbereitet.
        </p>
    </article>

    <article class="fwt-card fwt-card-hover">
        <div class="fwt-label-row fwt-label-row-between">
            <span class="fwt-badge fwt-badge-pro">Pro</span>
            <span class="fwt-badge fwt-badge-success">aktiv</span>
        </div>

        <h3 class="fwt-card-title">Dashboard</h3>

        <p class="fwt-card-text">
            Kennzahlen und Status in Kartenform darstellen.
        </p>
    </article>
</div>

Tabellen

Badges in Tabellen

In Tabellen helfen Badges, Status und Zustände schnell erkennbar zu machen.

Live-Beispiel
Bereich Status Version Hinweis
Buttons fertig Release I stabil
Multiselect geplant Release II später
Altes Muster veraltet ersetzen prüfen
HTML-Code anzeigen 
<div class="fwt-table-wrap">
    <table class="fwt-table">
        <thead>
            <tr>
                <th>Bereich</th>
                <th>Status</th>
                <th>Version</th>
                <th>Hinweis</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Buttons</td>
                <td><span class="fwt-badge fwt-badge-success">fertig</span></td>
                <td><span class="fwt-badge fwt-badge-muted">Release I</span></td>
                <td><span class="fwt-status fwt-status-success"><span class="fwt-status-dot" aria-hidden="true"></span> stabil</span></td>
            </tr>

            <tr>
                <td>Multiselect</td>
                <td><span class="fwt-badge fwt-badge-warning">geplant</span></td>
                <td><span class="fwt-badge fwt-badge-beta">Release II</span></td>
                <td><span class="fwt-status fwt-status-warning"><span class="fwt-status-dot" aria-hidden="true"></span> später</span></td>
            </tr>

            <tr>
                <td>Altes Muster</td>
                <td><span class="fwt-badge fwt-badge-danger">veraltet</span></td>
                <td><span class="fwt-badge fwt-badge-deprecated">ersetzen</span></td>
                <td><span class="fwt-status fwt-status-danger"><span class="fwt-status-dot" aria-hidden="true"></span> prüfen</span></td>
            </tr>
        </tbody>
    </table>
</div>

Barrierefreiheit

Badges richtig verwenden

Nicht nur Farbe

Ein rotes Badge muss auch verständlichen Text enthalten.

<span class="fwt-badge fwt-badge-danger">Fehler</span>

Kurz halten

Badges sind kleine Kennzeichen. Lange Texte gehören in normale Inhalte.

Neu / Aktiv / Beta / Fehler

Icons nur unterstützend

Icons dürfen helfen, aber der Text muss die Bedeutung tragen.

<span aria-hidden="true">✓</span> Geprüft

Zähler erklären

Eine Zahl allein ist oft unklar. Der Kontext muss die Bedeutung liefern.

<span class="fwt-badge-count">12</span> offene Aufgaben

Statuspunkt mit Text

Ein Punkt allein reicht nicht. Der sichtbare Text erklärt den Zustand.

<span class="fwt-status">Aktiv</span>

Nicht überladen

Zu viele Badges machen Karten und Tabellen unruhig.

Nur wichtige Kennzeichen setzen