Zum Hauptinhalt springen
FigmaOpenCode

Card

Synonyme: Karte, Kachel, Content-Box
Ähnliche Komponenten: Dialog, Sidebar, Pane

Hinweis

Die Komponente ist bereits einsatzbereit, jedoch fehlt noch die Dokumentation. Du kannst sie trotzdem schon verwenden – die Dokumentation wird in Kürze ergänzt.

Kurzbeschreibung​

Eine Card-Komponente präsentiert kompakte, zusammengehörige Inhalte in einem visuell abgegrenzten Bereich, oft mit Titel, Bild und Aktionen.

Beispiele​

Default Card​

Code anzeigen
<article class="kern-card" style="max-width: 320px;"> <!-- max-width is just an example and should be removed, the width is solved with grid system -->
<div class="kern-card__media">
  <img src="/img/kern-social-card.png" alt="ALT Text">
</div>
<div class="kern-card__body">
  <header class="kern-card__header">
    <p class="kern-card__label">Label</p>
    <h2 class="kern-card__title">Title</h2>
    <h3 class="kern-card__subtitle">Subtitle</h3>
  </header>
  <section class="kern-card__content">
    <p class="kern-text">Hier werden soviele Informationen zur Verfügung gestellt, wie benötigt und nicht mehr. Ein Maximum von 150 characters empfohlen.</p>
  </section>
  <footer class="kern-card__footer">
    <button class="kern-btn kern-btn--primary">
      <span class="kern-btn__title">Aktion</span>
    </button>
    <button class="kern-btn kern-btn--secondary">
      <span class="kern-btn__title">Aktion</span>
    </button>
  </footer>
</div>
</article>

Beschreibung​

Eine Card-Komponente dient der übersichtlichen Präsentation von Inhalten in einem abgegrenzten Bereich, der visuell hervorsticht. Typischerweise besteht eine Card aus einem Titel, Hauptinhalt und optionalem Bild. Sie eignet sich zur Darstellung von kompakten Informationsblöcken mit klarer Trennung zwischen unterschiedlichen Elementen.

Varianten der Card-Komponente​

  • Einfache Card: Nur mit Titel und Beschreibung.
  • Media Card: Enthält zusätzlich ein Bild.
  • Action Card: Mit interaktiven Elementen, z. B. Schaltflächen oder Links.

Verwendungsregeln​

  • Klarer Fokus: Eine Card sollte immer einen klaren Schwerpunkt haben und nur eine zusammenhängende Informationseinheit präsentieren.
  • Visuelle Konsistenz: Alle Cards in einem Kontext sollten die gleiche Größe und Struktur haben.
  • Reduzierte Inhalte: Vermeide zu viele Informationen in einer Card. Beschränke dich auf das Wesentliche.
  • Interaktive Elemente sparsam einsetzen: Vermeide eine Überfrachtung mit Schaltflächen und Aktionen.

Dos und Don’ts​

Dos​

  • Verwende Cards für zusammengehörige Inhalte oder Vorschauen.
  • Nutze visuelle Hierarchie, um wichtige Informationen hervorzuheben.
  • Halte die Abstände einheitlich und sorge für ausreichend Weißraum.
  • Ergänze Icons oder Bilder, um Inhalte visuell zu unterstützen.

Don’ts​

  • Nutze Cards nicht für lange Texte oder komplexe Tabellen.
  • Vermeide unterschiedliche Größen für Karten im gleichen Kontext.
  • Überlade die Card nicht mit zu vielen Aktionen oder Schaltflächen.
  • Keine redundanten Informationen innerhalb mehrerer Cards verwenden.

Barrierefreiheit​

  • Tastatur-Navigation unterstützen: Alle interaktiven Elemente müssen per Tabulator erreichbar sein.
  • Beschriftungen und Aria-Labels für interaktive Inhalte bereitstellen.
  • Ausreichende Kontraste und klare visuelle Rückmeldungen bei Interaktionen.
  • Responsivität beachten: Cards sollten sich an verschiedene Bildschirmgrößen anpassen und in einer sinnvollen Reihenfolge angeordnet sein.

Inhaltsverzeichnis