Cards / Karten · FWT Dokumentation

Komponenten / Cards

Cards / Karten in FWT

Karten strukturieren Inhalte in sichtbare, gut erfassbare Bereiche. Sie eignen sich für Toolübersichten, Startseiten, Dashboards, Featurebereiche, Preise, Statusmeldungen und Projektvorschauen.

FWT behandelt Karten nicht nur als einfache Box, sondern als flexiblen Baustein für echte Webseiten und Webtools.

Wichtig: Karten sollen Inhalte ordnen, nicht nur dekorieren. Wenn alles eine Karte ist, verliert die Karte ihre Wirkung.

Basis

Basiskarte

Die Basiskarte besteht aus einer klaren Fläche mit optionalem Header, Body und Footer.

Live-Beispiel

Basiskarte

Einfache Inhaltskarte

Eine Karte bündelt zusammengehörige Inhalte in einer klaren Fläche.

HTML-Code anzeigen

<article class="fwt-card">
    <div class="fwt-card-header">
        <h3 class="fwt-card-title">Basiskarte</h3>
        <p class="fwt-card-subtitle">Einfache Inhaltskarte</p>
    </div>

    <div class="fwt-card-body">
        <p class="fwt-card-text">
            Eine Karte bündelt zusammengehörige Inhalte in einer klaren Fläche.
        </p>
    </div>

    <footer class="fwt-card-footer">
        <span class="fwt-card-meta">Stand: Release I</span>
        <a class="fwt-link-arrow" href="#">Mehr erfahren</a>
    </footer>
</article>

Raster

Kartenraster

Kartenraster ordnen mehrere Karten gleichmäßig an und brechen responsiv um.

Live-Beispiel

Typografie

Texte, Überschriften und Leseflächen.

Formulare

Inputs, Selects, Checkboxen und MiniEditor.

Komponenten

Buttons, Cards, Hinweise und weitere Bausteine.

HTML-Code anzeigen

<div class="fwt-card-grid fwt-card-grid-3">
    <article class="fwt-card">
        <h3 class="fwt-card-title">Typografie</h3>
        <p class="fwt-card-text">Texte, Überschriften und Leseflächen.</p>
    </article>

    <article class="fwt-card">
        <h3 class="fwt-card-title">Formulare</h3>
        <p class="fwt-card-text">Inputs, Selects, Checkboxen und MiniEditor.</p>
    </article>

    <article class="fwt-card">
        <h3 class="fwt-card-title">Komponenten</h3>
        <p class="fwt-card-text">Buttons, Cards, Hinweise und weitere Bausteine.</p>
    </article>
</div>

Varianten

Kartenvarianten

Varianten helfen, Bedeutung und Gewicht einer Karte sichtbar zu machen. Farbe darf dabei unterstützen, aber der Text muss die Aussage tragen.

Live-Beispiel

Primary

Für wichtige Inhalte oder hervorgehobene Bereiche.

Success

Für erfolgreiche Zustände oder positive Hinweise.

Warning

Für Prüfhinweise oder wichtige Warnungen.

Danger

Für kritische Hinweise oder gefährliche Aktionen.

Soft

Für ruhige Inhaltsbereiche.

Dark

Für hochwertige dunkle Bereiche.

HTML-Code anzeigen

<div class="fwt-card-grid fwt-card-grid-3">
    <article class="fwt-card fwt-card-primary">
        <h3 class="fwt-card-title">Primary</h3>
        <p class="fwt-card-text">Für wichtige Inhalte oder hervorgehobene Bereiche.</p>
    </article>

    <article class="fwt-card fwt-card-success">
        <h3 class="fwt-card-title">Success</h3>
        <p class="fwt-card-text">Für erfolgreiche Zustände oder positive Hinweise.</p>
    </article>

    <article class="fwt-card fwt-card-warning">
        <h3 class="fwt-card-title">Warning</h3>
        <p class="fwt-card-text">Für Prüfhinweise oder wichtige Warnungen.</p>
    </article>

    <article class="fwt-card fwt-card-danger">
        <h3 class="fwt-card-title">Danger</h3>
        <p class="fwt-card-text">Für kritische Hinweise oder gefährliche Aktionen.</p>
    </article>

    <article class="fwt-card fwt-card-soft">
        <h3 class="fwt-card-title">Soft</h3>
        <p class="fwt-card-text">Für ruhige Inhaltsbereiche.</p>
    </article>

    <article class="fwt-card fwt-card-dark">
        <h3 class="fwt-card-title">Dark</h3>
        <p class="fwt-card-text">Für hochwertige dunkle Bereiche.</p>
    </article>
</div>

Status

Statuskarten

Statuskarten eignen sich für Aufgaben, Prüfstände, Systemchecks, Dashboards oder Adminbereiche.

Live-Beispiel

erledigt

Doku-Seite steht

Der Abschnitt wurde angelegt und geprüft.

prüfen

Mobile Ansicht

Die Darstellung sollte auf kleinen Bildschirmen getestet werden.

kritisch

Pfad fehlt

Eine wichtige Datei wurde nicht gefunden.

HTML-Code anzeigen

<div class="fwt-card-grid fwt-card-grid-3">
    <article class="fwt-card fwt-status-card fwt-status-card-success">
        <span class="fwt-card-badge fwt-card-badge-success">erledigt</span>
        <h3 class="fwt-card-title">Doku-Seite steht</h3>
        <p class="fwt-card-text">Der Abschnitt wurde angelegt und geprüft.</p>
    </article>

    <article class="fwt-card fwt-status-card fwt-status-card-warning">
        <span class="fwt-card-badge fwt-card-badge-warning">prüfen</span>
        <h3 class="fwt-card-title">Mobile Ansicht</h3>
        <p class="fwt-card-text">Die Darstellung sollte auf kleinen Bildschirmen getestet werden.</p>
    </article>

    <article class="fwt-card fwt-status-card fwt-status-card-danger">
        <span class="fwt-card-badge fwt-card-badge-danger">kritisch</span>
        <h3 class="fwt-card-title">Pfad fehlt</h3>
        <p class="fwt-card-text">Eine wichtige Datei wurde nicht gefunden.</p>
    </article>
</div>

Icons

Iconkarten

Iconkarten setzen einen sichtbaren Einstiegspunkt. Das Icon unterstützt den Inhalt, ersetzt aber nicht die Überschrift.

Live-Beispiel

Texte

Typografie, Lesetexte und Inhaltsstruktur.

Prüfung

Status, Hinweise und erledigte Aufgaben.

Achtung

Wichtige Punkte sichtbar machen.

HTML-Code anzeigen

<div class="fwt-card-grid fwt-card-grid-3">
    <article class="fwt-card fwt-icon-card">
        <span class="fwt-card-icon" aria-hidden="true">T</span>
        <h3 class="fwt-card-title">Texte</h3>
        <p class="fwt-card-text">Typografie, Lesetexte und Inhaltsstruktur.</p>
    </article>

    <article class="fwt-card fwt-icon-card">
        <span class="fwt-card-icon fwt-card-icon-success" aria-hidden="true">✓</span>
        <h3 class="fwt-card-title">Prüfung</h3>
        <p class="fwt-card-text">Status, Hinweise und erledigte Aufgaben.</p>
    </article>

    <article class="fwt-card fwt-icon-card">
        <span class="fwt-card-icon fwt-card-icon-warning" aria-hidden="true">!</span>
        <h3 class="fwt-card-title">Achtung</h3>
        <p class="fwt-card-text">Wichtige Punkte sichtbar machen.</p>
    </article>
</div>

Feature

Featurekarten

Featurekarten eignen sich für Startseiten, Produktseiten, Toolübersichten oder erklärende Projektbereiche.

Live-Beispiel

Feature

FWT als Baukasten

Karten eignen sich für Featurebereiche, Startseiten, Toolübersichten und Projektvorstellungen.

klare Inhaltsstruktur
flexibel kombinierbar
gut für echte Webseiten

Ansehen Details

HTML-Code anzeigen

<article class="fwt-card fwt-feature-card fwt-card-elevated">
    <span class="fwt-card-badge fwt-card-badge-info">Feature</span>

    <h3 class="fwt-card-title">FWT als Baukasten</h3>

    <p class="fwt-card-text">
        Karten eignen sich für Featurebereiche, Startseiten, Toolübersichten
        und Projektvorstellungen.
    </p>

    <ul class="fwt-feature-list">
        <li>klare Inhaltsstruktur</li>
        <li>flexibel kombinierbar</li>
        <li>gut für echte Webseiten</li>
    </ul>

    <div class="fwt-card-actions">
        <a class="fwt-btn fwt-btn-primary" href="#">Ansehen</a>
        <a class="fwt-btn fwt-btn-secondary" href="#">Details</a>
    </div>
</article>

Linkkarten

Vollständig anklickbare Linkkarten

Linkkarten eignen sich als Einstieg in andere Bereiche. Der Linktext und die Kartenüberschrift müssen klar machen, wohin der Klick führt.

Live-Beispiel

Dokumentation

Klassen, Beispiele und Hinweise ansehen.

Komponenten

Buttons, Karten und weitere Bausteine öffnen.

Formulare

Inputs, Selects und MiniEditor prüfen.

HTML-Code anzeigen

<div class="fwt-card-grid fwt-card-grid-3">
    <a class="fwt-card fwt-card-link fwt-card-hover" href="#">
        <h3 class="fwt-card-title">Dokumentation</h3>
        <p class="fwt-card-text">Klassen, Beispiele und Hinweise ansehen.</p>
    </a>

    <a class="fwt-card fwt-card-link fwt-card-hover" href="#">
        <h3 class="fwt-card-title">Komponenten</h3>
        <p class="fwt-card-text">Buttons, Karten und weitere Bausteine öffnen.</p>
    </a>

    <a class="fwt-card fwt-card-link fwt-card-hover" href="#">
        <h3 class="fwt-card-title">Formulare</h3>
        <p class="fwt-card-text">Inputs, Selects und MiniEditor prüfen.</p>
    </a>
</div>

Preise

Preiskarten

Preiskarten eignen sich für Paketübersichten, Angebotsstufen oder vergleichbare Leistungsgruppen.

Live-Beispiel

Basis

0 € / Start

Für freie Nutzung und einfache Projekte.

Grundklassen
Doku-Beispiele
lokal nutzbar

beliebt

Pro

später / Paket

Für erweiterte Vorlagen, Module und Support.

mehr Musterseiten
Komfortfunktionen
erweiterte Komponenten

Individuell

Anfrage / Projekt

Für angepasste Kundenlösungen und eigene Themes.

Projektanpassung
Designsystem
Dokumentation

HTML-Code anzeigen

<div class="fwt-card-grid fwt-card-grid-3">
    <article class="fwt-card fwt-price-card">
        <h3 class="fwt-card-title">Basis</h3>

        <p class="fwt-price">
            <span class="fwt-price-value">0 €</span>
            <span class="fwt-price-unit">/ Start</span>
        </p>

        <p class="fwt-card-text">
            Für freie Nutzung und einfache Projekte.
        </p>

        <ul class="fwt-feature-list">
            <li>Grundklassen</li>
            <li>Doku-Beispiele</li>
            <li>lokal nutzbar</li>
        </ul>
    </article>

    <article class="fwt-card fwt-price-card fwt-price-card-highlight">
        <span class="fwt-card-badge fwt-card-badge-info">beliebt</span>

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

        <p class="fwt-price">
            <span class="fwt-price-value">später</span>
            <span class="fwt-price-unit">/ Paket</span>
        </p>

        <p class="fwt-card-text">
            Für erweiterte Vorlagen, Module und Support.
        </p>

        <ul class="fwt-feature-list">
            <li>mehr Musterseiten</li>
            <li>Komfortfunktionen</li>
            <li>erweiterte Komponenten</li>
        </ul>
    </article>

    <article class="fwt-card fwt-price-card">
        <h3 class="fwt-card-title">Individuell</h3>

        <p class="fwt-price">
            <span class="fwt-price-value">Anfrage</span>
            <span class="fwt-price-unit">/ Projekt</span>
        </p>

        <p class="fwt-card-text">
            Für angepasste Kundenlösungen und eigene Themes.
        </p>

        <ul class="fwt-feature-list">
            <li>Projektanpassung</li>
            <li>Designsystem</li>
            <li>Dokumentation</li>
        </ul>
    </article>
</div>

Preise und Pakete müssen klar formuliert sein. Eine hervorgehobene Karte darf Nutzer nicht absichtlich in die Irre führen.

Dashboard

Dashboardkarten

Dashboardkarten zeigen Kennzahlen, Status oder kurze Zusammenfassungen. Sie sind besonders für Adminbereiche und Systemübersichten nützlich.

Live-Beispiel

24

Bausteine

+4

Neue Komponenten im aktuellen Ausbau.

7

Inhaltsbereiche

stabil

Typografie, Links, Listen, Medien und mehr.

5

Formularseiten

neu

Inputs, Selects, Checks und MiniEditor.

II

Ausblick

geplant

Ajax, Formen, Hintergründe und starke Vorlagen.

HTML-Code anzeigen

<div class="fwt-card-grid fwt-card-grid-4">
    <article class="fwt-card fwt-dashboard-card">
        <div class="fwt-dashboard-card-top">
            <div>
                <p class="fwt-dashboard-value">24</p>
                <p class="fwt-dashboard-label">Bausteine</p>
            </div>

            <span class="fwt-dashboard-trend">+4</span>
        </div>

        <p class="fwt-card-text">Neue Komponenten im aktuellen Ausbau.</p>
    </article>

    <article class="fwt-card fwt-dashboard-card">
        <div class="fwt-dashboard-card-top">
            <div>
                <p class="fwt-dashboard-value">7</p>
                <p class="fwt-dashboard-label">Inhaltsbereiche</p>
            </div>

            <span class="fwt-dashboard-trend">stabil</span>
        </div>

        <p class="fwt-card-text">Typografie, Links, Listen, Medien und mehr.</p>
    </article>

    <article class="fwt-card fwt-dashboard-card">
        <div class="fwt-dashboard-card-top">
            <div>
                <p class="fwt-dashboard-value">5</p>
                <p class="fwt-dashboard-label">Formularseiten</p>
            </div>

            <span class="fwt-dashboard-trend">neu</span>
        </div>

        <p class="fwt-card-text">Inputs, Selects, Checks und MiniEditor.</p>
    </article>

    <article class="fwt-card fwt-dashboard-card">
        <div class="fwt-dashboard-card-top">
            <div>
                <p class="fwt-dashboard-value">II</p>
                <p class="fwt-dashboard-label">Ausblick</p>
            </div>

            <span class="fwt-dashboard-trend fwt-dashboard-trend-neutral">geplant</span>
        </div>

        <p class="fwt-card-text">Ajax, Formen, Hintergründe und starke Vorlagen.</p>
    </article>
</div>

Horizontal

Horizontale Karte mit Medienbereich

Horizontale Karten eignen sich, wenn Bild oder Medienfläche und Text gleichwertig wirken sollen.

Live-Beispiel

Horizontal

Karte mit Medienbereich

Horizontale Karten eignen sich für Blogvorschauen, Projektteaser, Toolvorstellungen oder größere Inhaltsverknüpfungen.

Öffnen Mehr erfahren

HTML-Code anzeigen

<article class="fwt-card fwt-card-horizontal">
    <div class="fwt-card-horizontal-media">
        <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%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0D%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%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%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Cards%3C%2Ftext%3E%0D%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Karten%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E%0D%0A" alt="Abstrakte FWT-Demografik">
    </div>

    <div class="fwt-card-horizontal-body">
        <span class="fwt-card-badge fwt-card-badge-info">Horizontal</span>

        <h3 class="fwt-card-title">Karte mit Medienbereich</h3>

        <p class="fwt-card-text">
            Horizontale Karten eignen sich für Blogvorschauen, Projektteaser,
            Toolvorstellungen oder größere Inhaltsverknüpfungen.
        </p>

        <div class="fwt-card-actions">
            <a class="fwt-btn fwt-btn-primary" href="#">Öffnen</a>
            <a class="fwt-btn fwt-btn-secondary" href="#">Mehr erfahren</a>
        </div>
    </div>
</article>

Barrierefreiheit

Karten richtig verwenden

Karten nicht als Ersatz für Semantik

Eine Karte ist Gestaltung. Überschriften, Listen und Links sollten trotzdem korrekt verwendet werden.

<article class="fwt-card">...</article>

Linkkarten klar benennen

Nutzer müssen verstehen, wohin eine anklickbare Karte führt.

<a class="fwt-card fwt-card-link" href="#">...</a>

Nicht nur Farbe nutzen

Statuskarten brauchen Text, Badge oder Überschrift – nicht nur Farbe.

<span class="fwt-card-badge">prüfen</span>

Bilder beschreiben

Bilder in Karten brauchen sinnvolle Alt-Texte, wenn sie Inhalt tragen.

<img src="bild.png" alt="Beschreibung">

Aktionen unterscheidbar machen

Hauptaktion und Nebenaktion sollten nicht gleich wichtig aussehen.

<div class="fwt-card-actions">...</div>

Nicht überladen

Zu viele Inhalte in einer Karte machen sie schlechter lesbar.

Eine Karte = ein klarer Inhalt