FigmaOpenCode

Card

Synonyme: Karte, Kachel, Content-Box

Ähnliche Komponenten: Dialog

Kurzbeschreibung

Präsentiert kompakte, zusammengehörige Inhalte in einem visuell abgegrenzten Bereich.

Beispiele

Varianten

Code anzeigen

  <div class="kern-container">
    <div class="kern-row">
      <div class="kern-col">
        <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-img-media.png" alt="ALT Text">
          </div>
          <div class="kern-card__container">
            <header class="kern-card__header">
              <p class="kern-preline">Vorzeile</p>
              <h2 class="kern-title">Default</h2>
              <h3 class="kern-subline">Unterzeile</h3>
            </header>
            <section class="kern-card__body">
              <p class="kern-body">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-label">Primäraktion</span>
              </button>
              <button class="kern-btn kern-btn--secondary">
                <span class="kern-label">Aktion</span>
              </button>
            </footer>
          </div>
        </article> 
      </div>
      <div class="kern-col">
        <article class="kern-card kern-card--active" 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-img-media.png" alt="ALT Text">
          </div>
          <div class="kern-card__container">
            <header class="kern-card__header">
              <p class="kern-preline">Vorzeile</p>
              <h2 class="kern-title"><a href="#" class="kern-link--stretched">Interaktiv</a></h2>
              <h3 class="kern-subline">Unterzeile</h3>
            </header>
            <section class="kern-card__body">
              <p class="kern-body">Hier werden soviele Informationen zur Verfügung gestellt, wie benötigt und nicht mehr. Ein Maximum von 150 characters empfohlen.</p>
            </section>
          </div>
        </article> 
      </div>
      <div class="kern-col">
        <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-img-media.png" alt="ALT Text">
          </div>
          <div class="kern-card__container">
            <header class="kern-card__header">
              <p class="kern-preline">Vorzeile</p>
              <h2 class="kern-title">Info</h2>
              <h3 class="kern-subline">Unterzeile</h3>
            </header>
            <section class="kern-card__body">
              <p class="kern-body">Hier werden soviele Informationen zur Verfügung gestellt, wie benötigt und nicht mehr. Ein Maximum von 150 characters empfohlen.</p>
            </section>
          </div>
        </article> 
      </div>
    </div>
  </div>

Größen

Code anzeigen

  <div class="kern-container">
    <div class="kern-row">
      <div class="kern-col">
        <article class="kern-card kern-card--active kern-card--small" style="max-width: 320px;"> 
          <div class="kern-card__media">
            <img src="/img/kern-img-media.png" alt="ALT Text"> <!-- max-width is just an example and should be removed, the width is solved with grid system -->
          </div>
          <div class="kern-card__container">
            <header class="kern-card__header">
              <p class="kern-preline">Vorzeile</p>
              <h2 class="kern-title"><a href="#" class="kern-link--stretched">Card Größe small</a></h2>
              <h3 class="kern-subline">Unterzeile</h3>
            </header>
            <section class="kern-card__body">
              <p class="kern-body">Hier werden soviele Informationen zur Verfügung gestellt, wie benötigt und nicht mehr. Ein Maximum von 150 characters empfohlen.</p>
            </section>
          </div>
        </article>
      </div>
      <div class="kern-col">
        <article class="kern-card kern-card--active" style="max-width: 320px;"> 
          <div class="kern-card__media">
            <img src="/img/kern-img-media.png" alt="ALT Text"> <!-- max-width is just an example and should be removed, the width is solved with grid system -->
          </div>
          <div class="kern-card__container">
            <header class="kern-card__header">
              <p class="kern-preline">Vorzeile</p>
              <h2 class="kern-title"><a href="#" class="kern-link--stretched">Card Größe default</a></h2>
              <h3 class="kern-subline">Unterzeile</h3>
            </header>
            <section class="kern-card__body">
              <p class="kern-body">Hier werden soviele Informationen zur Verfügung gestellt, wie benötigt und nicht mehr. Ein Maximum von 150 characters empfohlen.</p>
            </section>
          </div>
        </article> 
      </div>
      <div class="kern-col"> 
        <article class="kern-card kern-card--active kern-card--large" style="max-width: 320px;"> 
          <div class="kern-card__media">
            <img src="/img/kern-img-media.png" alt="ALT Text"> <!-- max-width is just an example and should be removed, the width is solved with grid system -->
          </div>
          <div class="kern-card__container">
            <header class="kern-card__header">
              <p class="kern-preline">Vorzeile</p>
              <h2 class="kern-title"><a href="#" class="kern-link--stretched">Card Größe large</a></h2>
              <h3 class="kern-subline">Unterzeile</h3>
            </header>
            <section class="kern-card__body">
              <p class="kern-body">Hier werden soviele Informationen zur Verfügung gestellt, wie benötigt und nicht mehr. Ein Maximum von 150 characters empfohlen.</p>
            </section>
          </div>
        </article> 
      </div>
    </div>
  </div>
  

Beschreibung

Eine Card-Komponente dient der strukturierten Präsentation eines bestimmten Inhalts in einem abgegrenzten Bereich, der visuell hervorsticht.

Die Card-Komponente besteht aus vier Hauptbereichen: Media, Header, Body und Footer. Diese Bereiche können je nach Anwendungsfall und Inhalt der Card-Komponente angepasst und erweitert werden. Die Card-Komponente ist darauf ausgelegt, eine Vielzahl von Inhalten zu präsentieren, darunter Bilder, Texte, Schaltflächen und andere Elemente.

Das Bild ist innerhalb von Media positioniert. Im Header können eine Preline und eine Subline ergänzend angezeigt werden. Der Body-Bereich kann mit eigenen Komponenten oder mit einer KERN Komponente, wie z. B. einer Description List gefüllt werden. Im Footer können ein bis zwei Buttons angezeigt werden.

Cards können neben- und untereinander im Grid platziert werden. Die Card kann auch in der interaktiven Version genutzt werden. Hier ist die gesamte Karte flächig interaktiv. Die Komponente ist in drei Größen verfügbar – „small“, „default“ und „large“.

Verwendungsregeln

Verwende die Card-Komponente, um Inhalte semantisch zu strukturieren. Achte auf folgende Punkte:

• Klarer Fokus: Eine Card sollte immer einen klaren Schwerpunkt haben und nur eine zusammenhängende Informationseinheit oder Aufgabe präsentieren. Nutze visuelle Hierarchie, um wichtige Informationen hervorzuheben.
• Visuelle Konsistenz: Alle Cards in einem Kontext sollten die gleiche Größe, Struktur und Abstände haben. Wenn du Medien-Inhalte nutzt, um Inhalte visuell zu unterstützen, bleibe auch hier konsistent in der Größe.
• 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 and 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.
• Verwende keine redundanten Informationen innerhalb mehrerer Cards.
• Nutze maximal einen Medieninhalt in einer Karte.

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße und Kontrastverhältnis – für barrierefreie Dienste.

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