Reality Check Cards

Karten-Komponenten zur Darstellung von Mythos, Realität und Ansatz mit farblich unterschiedlichen Hintergründen.

Card Varianten

Mythos

KI nimmt uns die Jobs weg

Die weit verbreitete Angst, dass künstliche Intelligenz massenhaft Arbeitsplätze vernichten wird.
Realität

KI verändert die Arbeitswelt

KI automatisiert Routineaufgaben und schafft neue Berufsfelder. Die Arbeitswelt wandelt sich, aber Menschen bleiben unverzichtbar.
Unser Ansatz

Wir befähigen Menschen

Durch praxisnahe Schulungen und Workshops bereiten wir Fachkräfte auf die Zusammenarbeit mit KI vor.

Verwendung

<div class="reality-check-card reality-check-card--purple">
    <div class="reality-check-card__label">Mythos</div>
    <h3 class="reality-check-card__title">KI nimmt uns die Jobs weg</h3>
    <div class="reality-check-card__content">
        Die weit verbreitete Angst, dass künstliche Intelligenz massenhaft Arbeitsplätze vernichten wird.
    </div>
</div>

Farbvarianten

Purple Card (Mythos)

Hintergrund: #F2E8FF

CSS Variable: --ai-card-purple-bg

Verwendung: Für Mythen und falsche Annahmen

Yellow Card (Realität)

Hintergrund: #FFF5D6

CSS Variable: --ai-card-yellow-bg

Verwendung: Für Fakten und Realitäten

Green Card (Ansatz)

Hintergrund: #E8F7F5

CSS Variable: --ai-card-green-bg

Verwendung: Für Lösungen und Ansätze

Layout Optionen

Dreispaltiges Grid

Mythos

Card 1

Realität

Card 2

Ansatz

Card 3

Responsive Verhalten

Die Karten passen sich automatisch an die Bildschirmgröße an. Auf mobilen Geräten werden sie untereinander angezeigt, auf größeren Bildschirmen nebeneinander.

Best Practices

  • Halten Sie die Titel kurz und prägnant (max. 50 Zeichen)
  • Verwenden Sie die Farbcodierung konsistent: Purple für Mythen, Yellow für Realität, Green für Lösungen
  • Achten Sie auf gleiche Inhaltslängen für ein harmonisches Layout
  • Die Karten sollten immer als Set von drei verwendet werden
  • Nutzen Sie klare, verständliche Sprache ohne Fachjargon