Rainbow · FWT Dokumentation

Komponenten / Rainbow

Rainbow in FWT

Rainbow ist ein dekorativer FWT-Akzent für besondere Bereiche. Es ist kein Grundlayout, sondern ein Highlight für kreative, wichtige oder besonders sichtbare Elemente.

Der Vorteil: Nutzer müssen nicht mehrere alte Rainbow-Varianten kombinieren. Die neuen Komfortklassen machen Rainbow einfacher nutzbar.

Wichtig: Rainbow sparsam einsetzen. Wenn alles bunt ist, wirkt nichts mehr besonders.

Basis

Rainbow-Grundklasse

Die Grundklasse eignet sich für schnelle, dezente Rainbow-Akzente.

Live-Beispiel

Rainbow-Grundklasse

Die Klasse fwt-rainbow setzt einen dezenten Rainbow-Hintergrund als schnellen Akzent.

HTML-Code anzeigen

<div class="fwt-card fwt-rainbow">
    <h3 class="fwt-card-title">Rainbow-Grundklasse</h3>

    <p class="fwt-card-text">
        Die Klasse <code>fwt-rainbow</code> setzt einen dezenten Rainbow-Hintergrund
        als schnellen Akzent.
    </p>
</div>

Box

Rainbow-Box

Die Rainbow-Box ist eine stärkere Fläche für besondere Inhalte, kreative Hinweise oder Projektvorstellungen.

Live-Beispiel

Rainbow Box

Eine auffälligere Fläche für besondere Inhalte

Rainbow-Boxen eignen sich für kreative Hinweise, besondere Features, Projektvorstellungen oder Startseitenbereiche.

Beispiel öffnen Mehr erfahren

HTML-Code anzeigen

<section class="fwt-rainbow-box">
    <p class="fwt-cta-kicker">Rainbow Box</p>

    <h3 class="fwt-cta-title">
        Eine auffälligere Fläche für besondere Inhalte
    </h3>

    <p class="fwt-cta-text">
        Rainbow-Boxen eignen sich für kreative Hinweise, besondere Features,
        Projektvorstellungen oder Startseitenbereiche.
    </p>

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

Cards

Rainbow-Cards

Rainbow-Cards eignen sich für Highlights innerhalb von Kartenrastern.

Live-Beispiel

Rainbow Card

Karte mit Rainbow-Rahmen.

Soft Card

Etwas weicher und heller.

Hover Card

Gut für klickbare Bereiche.

HTML-Code anzeigen

<div class="fwt-card-grid fwt-card-grid-3">
    <article class="fwt-card fwt-rainbow-card">
        <h3 class="fwt-card-title">Rainbow Card</h3>

        <p class="fwt-card-text">
            Karte mit Rainbow-Rahmen.
        </p>
    </article>

    <article class="fwt-card fwt-rainbow-card fwt-rainbow-card-soft">
        <h3 class="fwt-card-title">Soft Card</h3>

        <p class="fwt-card-text">
            Etwas weicher und heller.
        </p>
    </article>

    <article class="fwt-card fwt-rainbow-card fwt-card-hover">
        <h3 class="fwt-card-title">Hover Card</h3>

        <p class="fwt-card-text">
            Gut für klickbare Bereiche.
        </p>
    </article>
</div>

Akzente

Rainbow-Akzentkanten

Akzentkanten sind dezenter als große bunte Flächen und deshalb oft besser für reale Webseiten geeignet.

Live-Beispiel

Linke Rainbow-Kante

Für Hinweise, Cards oder Inhaltsbereiche mit dezentem Akzent.

Obere Rainbow-Kante

Für Karten, Panels oder besondere Abschnitte.

HTML-Code anzeigen

<div class="fwt-card-grid fwt-card-grid-2">
    <article class="fwt-card fwt-rainbow-left">
        <h3 class="fwt-card-title">Linke Rainbow-Kante</h3>

        <p class="fwt-card-text">
            Für Hinweise, Cards oder Inhaltsbereiche mit dezentem Akzent.
        </p>
    </article>

    <article class="fwt-card fwt-rainbow-top">
        <h3 class="fwt-card-title">Obere Rainbow-Kante</h3>

        <p class="fwt-card-text">
            Für Karten, Panels oder besondere Abschnitte.
        </p>
    </article>
</div>

Text

Rainbow-Text und Überschrift

Rainbow-Text kann einzelne Begriffe oder Überschriften hervorheben. Er sollte nur dort eingesetzt werden, wo die Lesbarkeit erhalten bleibt.

Live-Beispiel

Rainbow als Überschrift

Auch einzelne Wörter können betont werden: kreativ, sichtbar und besonders.

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-rainbow-heading">
        Rainbow als Überschrift
    </h3>

    <p class="fwt-card-text">
        Auch einzelne Wörter können betont werden:
        <span class="fwt-rainbow-text">kreativ, sichtbar und besonders</span>.
    </p>
</div>

Linien

Rainbow-Linien

Rainbow-Linien eignen sich als Trenner oder kleine dekorative Akzente.

Live-Beispiel

Rainbow-Linien

HTML-Code anzeigen

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

    <span class="fwt-rainbow-line fwt-rainbow-line-sm"></span>
    <span class="fwt-rainbow-line"></span>
    <span class="fwt-rainbow-line fwt-rainbow-line-lg"></span>
</div>

Badges

Rainbow-Badges

Rainbow-Badges eignen sich für besondere Kennzeichen wie Kreativ, Highlight oder Special.

Live-Beispiel

Rainbow Badge Gefüllt Creative

HTML-Code anzeigen

<div class="fwt-badge-group">
    <span class="fwt-rainbow-badge">Rainbow Badge</span>
    <span class="fwt-rainbow-badge fwt-rainbow-badge-filled">Gefüllt</span>
    <span class="fwt-badge fwt-badge-creative">Creative</span>
</div>

Buttons

Rainbow-Buttons

Rainbow-Buttons sollten nur für besondere Aktionen genutzt werden. Für normale Hauptaktionen bleibt fwt-btn-primary besser.

Live-Beispiel

Rainbow Button Gefüllter Rainbow Button

HTML-Code anzeigen

<div class="fwt-btn-group">
    <a class="fwt-btn fwt-btn-rainbow" href="#">Rainbow Button</a>
    <a class="fwt-btn fwt-btn-rainbow-filled" href="#">Gefüllter Rainbow Button</a>
</div>

Dark

Rainbow Dark

Die dunkle Rainbow-Variante eignet sich für auffällige Hero-Bereiche, Premiumflächen oder kreative Toolseiten.

Live-Beispiel

Rainbow Dark

Dunkler Rainbow-Bereich für starke Auftritte

Diese Variante eignet sich für Hero-Bereiche, Toolseiten, kreative Projektflächen oder besondere Highlights.

auffällig
modern
sparsam einsetzen

Highlight starten Details ansehen

HTML-Code anzeigen

<section class="fwt-cta fwt-rainbow-dark fwt-cta-hero">
    <p class="fwt-cta-kicker">Rainbow Dark</p>

    <h3 class="fwt-cta-title">
        Dunkler Rainbow-Bereich für starke Auftritte
    </h3>

    <p class="fwt-cta-text">
        Diese Variante eignet sich für Hero-Bereiche, Toolseiten,
        kreative Projektflächen oder besondere Highlights.
    </p>

    <ul class="fwt-cta-meta">
        <li>auffällig</li>
        <li>modern</li>
        <li>sparsam einsetzen</li>
    </ul>

    <div class="fwt-cta-actions">
        <a class="fwt-btn fwt-btn-rainbow-filled" href="#">Highlight starten</a>
        <a class="fwt-btn fwt-btn-secondary" href="#">Details ansehen</a>
    </div>
</section>

Soft

Dezenter Rainbow-Hintergrund

Der dezente Hintergrund ist weniger laut und deshalb für viele echte Einsatzbereiche geeigneter.

Live-Beispiel

Dezenter Rainbow-Hintergrund

Diese Variante ist ruhiger und kann für Beispielbereiche, kleine Abschnitte oder kreative Hintergrundflächen genutzt werden.

HTML-Code anzeigen

<section class="fwt-card fwt-rainbow-bg-soft">
    <h3 class="fwt-card-title">Dezenter Rainbow-Hintergrund</h3>

    <p class="fwt-card-text">
        Diese Variante ist ruhiger und kann für Beispielbereiche, kleine Abschnitte
        oder kreative Hintergrundflächen genutzt werden.
    </p>
</section>

Barrierefreiheit

Rainbow richtig verwenden

Sparsam einsetzen

Rainbow ist ein Akzent. Zu viele bunte Bereiche machen eine Seite unruhig.

Ein Highlight pro Abschnitt reicht oft.

Lesbarkeit prüfen

Besonders Rainbow-Text muss gut lesbar bleiben.

<span class="fwt-rainbow-text">Text</span>

Nicht nur Farbe

Rainbow darf Bedeutung unterstützen, aber nicht allein erklären.

Text erklärt die Bedeutung.

Normale Buttons bevorzugen

Für alltägliche Aktionen sind normale Buttonfarben ruhiger und klarer.

fwt-btn-primary statt immer Rainbow

Kontrast testen

Auf dunklen und bunten Flächen müssen Texte und Buttons ausreichend Kontrast haben.

Kontrastprüfung bleibt Pflicht.

Kein Dauerfeuer

Rainbow wirkt nur, wenn der Rest der Oberfläche ruhig genug bleibt.

Akzent statt Grundrauschen