Listen · FWT Dokumentation

Inhalt / Listen

Listen in FWT

Listen strukturieren Inhalte. Sie helfen Nutzern, Informationen schneller zu erfassen, Schritte abzuarbeiten oder Zustände zu erkennen.

FWT bietet deshalb mehr als normale Aufzählungen: klassische Listen, Inline-Listen, Checklisten, Statuslisten, Iconlisten, Schrittlisten, Kartenlisten und einfache Timelines.

Wichtig: Listen sind für Struktur gedacht. Icons und Farben unterstützen die Aussage, ersetzen aber keinen verständlichen Text.

Klassisch

Klassische Listen

Die normale Liste ist weiterhin wichtig. Sie eignet sich für einfache Aufzählungen und geordnete Schritte.

Ungeordnete Liste

Für normale Aufzählungen ohne feste Reihenfolge.

Live-Beispiel

Erster Listenpunkt mit normalem Inhalt.
Zweiter Listenpunkt mit etwas mehr Erklärung.
Dritter Listenpunkt mit wichtiger Hervorhebung.

HTML-Code anzeigen

<ul class="fwt-list">
    <li>Erster Listenpunkt mit normalem Inhalt.</li>
    <li>Zweiter Listenpunkt mit etwas mehr Erklärung.</li>
    <li>Dritter Listenpunkt mit <strong>wichtiger Hervorhebung</strong>.</li>
</ul>

Geordnete Liste

Für Schritte oder Abläufe mit Reihenfolge.

Live-Beispiel

Ersten Schritt vorbereiten.
Datei öffnen und Inhalt prüfen.
Änderung speichern und testen.

HTML-Code anzeigen

<ol class="fwt-list">
    <li>Ersten Schritt vorbereiten.</li>
    <li>Datei öffnen und Inhalt prüfen.</li>
    <li>Änderung speichern und testen.</li>
</ol>

Inline

Inline-Listen

Inline-Listen eignen sich für Schlagwörter, Kategorien, kleine Navigationsgruppen oder kompakte Merkmalslisten.

Live-Beispiel

Typografie
Bilder
Tabellen
Medien
Listen

HTML-Code anzeigen

<ul class="fwt-list-inline">
    <li>Typografie</li>
    <li>Bilder</li>
    <li>Tabellen</li>
    <li>Medien</li>
    <li>Listen</li>
</ul>

Checklisten

Checklisten sind gut für erledigte Punkte, Vorbereitungen, Prüfungen oder kleine Aufgabenlisten.

Live-Beispiel

CSS-Datei eingebunden
Doku-Seite angelegt
Live-Beispiele geprüft
Cache-Version erhöht

HTML-Code anzeigen

<ul class="fwt-list-check">
    <li>CSS-Datei eingebunden</li>
    <li>Doku-Seite angelegt</li>
    <li>Live-Beispiele geprüft</li>
    <li>Cache-Version erhöht</li>
</ul>

Status

Statuslisten

Statuslisten helfen, positive Punkte, Prüfhinweise und Fehler klarer voneinander zu trennen.

Live-Beispiel

Erfolg

Abschnitt ist fertig
Beispiel funktioniert
Dokumentation ist verständlich

Prüfung

Kontrast kontrollieren
Mobile Ansicht prüfen
Code sauber kopieren

Fehler

Datei fehlt
Pfad ist falsch
Import wurde vergessen

HTML-Code anzeigen

<div class="fwt-grid fwt-grid-3">
    <div class="fwt-frame">
        <h3>Erfolg</h3>

        <ul class="fwt-list-success">
            <li>Abschnitt ist fertig</li>
            <li>Beispiel funktioniert</li>
            <li>Dokumentation ist verständlich</li>
        </ul>
    </div>

    <div class="fwt-frame">
        <h3>Prüfung</h3>

        <ul class="fwt-list-warning">
            <li>Kontrast kontrollieren</li>
            <li>Mobile Ansicht prüfen</li>
            <li>Code sauber kopieren</li>
        </ul>
    </div>

    <div class="fwt-frame">
        <h3>Fehler</h3>

        <ul class="fwt-list-danger">
            <li>Datei fehlt</li>
            <li>Pfad ist falsch</li>
            <li>Import wurde vergessen</li>
        </ul>
    </div>
</div>

Statuslisten dürfen nicht nur über Farbe funktionieren. Der Text muss die Bedeutung immer klar machen.

Iconlisten

Pfeil-, Punkt- und Diamantlisten

Iconlisten wirken moderner als normale Bulletpoints und eignen sich gut für kurze Inhalte, Featurelisten oder kleine Erklärbereiche.

Live-Beispiel

Pfeile

Zur nächsten Seite führen
Schritte andeuten
Handlung vorbereiten

Punkte

Ruhige Inhaltsliste
Moderne Alternative
Gut für kurze Texte

Diamanten

Markanter Einstieg
Kreativere Optik
Für besondere Bereiche

HTML-Code anzeigen

<div class="fwt-grid fwt-grid-3">
    <div class="fwt-frame">
        <h3>Pfeile</h3>

        <ul class="fwt-list-arrow">
            <li>Zur nächsten Seite führen</li>
            <li>Schritte andeuten</li>
            <li>Handlung vorbereiten</li>
        </ul>
    </div>

    <div class="fwt-frame">
        <h3>Punkte</h3>

        <ul class="fwt-list-dot">
            <li>Ruhige Inhaltsliste</li>
            <li>Moderne Alternative</li>
            <li>Gut für kurze Texte</li>
        </ul>
    </div>

    <div class="fwt-frame">
        <h3>Diamanten</h3>

        <ul class="fwt-list-diamond">
            <li>Markanter Einstieg</li>
            <li>Kreativere Optik</li>
            <li>Für besondere Bereiche</li>
        </ul>
    </div>
</div>

Schritte

Schrittlisten

Schrittlisten sind für Anleitungen gedacht. Sie zeigen klar, was in welcher Reihenfolge zu tun ist.

Live-Beispiel

Datei öffnen
Öffne die passende Datei im Projektordner.
Code einfügen
Füge den Beispielcode an der richtigen Stelle ein.
Speichern und testen
Lade die Seite neu und prüfe die Darstellung.

HTML-Code anzeigen

<ol class="fwt-list-steps">
    <li>
        <strong>Datei öffnen</strong><br>
        Öffne die passende Datei im Projektordner.
    </li>

    <li>
        <strong>Code einfügen</strong><br>
        Füge den Beispielcode an der richtigen Stelle ein.
    </li>

    <li>
        <strong>Speichern und testen</strong><br>
        Lade die Seite neu und prüfe die Darstellung.
    </li>
</ol>

Kartenlisten

Kartenlisten eignen sich für Aufgaben, Hinweise oder kurze Inhaltsgruppen, bei denen jeder Punkt etwas mehr Erklärung braucht.

Live-Beispiel

Typografie prüfen

Überschriften, Absätze und Links müssen gut lesbar bleiben.
Beispiele sichtbar machen

Nutzer sollen sofort erkennen, wofür eine Klasse gedacht ist.
Code kopierbar halten

Jede wichtige Demo sollte passenden Code zum Kopieren anbieten.

HTML-Code anzeigen

<ul class="fwt-list-cards">
    <li class="fwt-list-card">
        <h3 class="fwt-list-card-title">Typografie prüfen</h3>
        <p class="fwt-list-card-text">
            Überschriften, Absätze und Links müssen gut lesbar bleiben.
        </p>
    </li>

    <li class="fwt-list-card">
        <h3 class="fwt-list-card-title">Beispiele sichtbar machen</h3>
        <p class="fwt-list-card-text">
            Nutzer sollen sofort erkennen, wofür eine Klasse gedacht ist.
        </p>
    </li>

    <li class="fwt-list-card">
        <h3 class="fwt-list-card-title">Code kopierbar halten</h3>
        <p class="fwt-list-card-text">
            Jede wichtige Demo sollte passenden Code zum Kopieren anbieten.
        </p>
    </li>
</ul>

Timeline

Timeline-Liste

Eine Timeline eignet sich für Projektverläufe, Historien, Statusstände oder chronologische Abläufe.

Live-Beispiel

Schritt 1

Grundstruktur erstellt

Die Basisdateien wurden angelegt und eingebunden.
Schritt 2

Doku erweitert

Live-Beispiele und Codeblöcke wurden ergänzt.
Schritt 3

Prüfung offen

Darstellung, Kontrast und mobile Ansicht werden geprüft.

HTML-Code anzeigen

<ol class="fwt-list-timeline">
    <li>
        <p class="fwt-list-timeline-meta">Schritt 1</p>
        <h3 class="fwt-list-timeline-title">Grundstruktur erstellt</h3>
        <p class="fwt-list-timeline-text">
            Die Basisdateien wurden angelegt und eingebunden.
        </p>
    </li>

    <li>
        <p class="fwt-list-timeline-meta">Schritt 2</p>
        <h3 class="fwt-list-timeline-title">Doku erweitert</h3>
        <p class="fwt-list-timeline-text">
            Live-Beispiele und Codeblöcke wurden ergänzt.
        </p>
    </li>

    <li>
        <p class="fwt-list-timeline-meta">Schritt 3</p>
        <h3 class="fwt-list-timeline-title">Prüfung offen</h3>
        <p class="fwt-list-timeline-text">
            Darstellung, Kontrast und mobile Ansicht werden geprüft.
        </p>
    </li>
</ol>

Barrierefreiheit

Listen richtig verwenden

Listen für echte Listen nutzen

Wenn Inhalte zusammengehören, ist eine Liste oft besser als mehrere lose Absätze.

<ul class="fwt-list">...</ul>

Reihenfolge beachten

Wenn die Reihenfolge wichtig ist, sollte eine geordnete Liste verwendet werden.

<ol class="fwt-list">...</ol>

Status nicht nur über Icon

Ein Häkchen allein reicht nicht. Der Text muss sagen, was erledigt ist.

<ul class="fwt-list-check">...</ul>

Nicht alles als Liste bauen

Für echte Layouts sind Grid, Cards oder Layoutmuster oft besser.

<div class="fwt-grid fwt-grid-3">...</div>

Schrittlisten kurz halten

Lange Schrittlisten sollten in klare Abschnitte unterteilt werden.

<ol class="fwt-list-steps">...</ol>

Timeline nicht überladen

Eine Timeline ist stark, aber zu viele Punkte machen sie schnell unübersichtlich.

<ol class="fwt-list-timeline">...</ol>