Card ​

Die Card-Komponente wird verwendet, um eine zusammengehörige Gruppierung von Inhalten und Aktionen darzustellen.

Overview ​

Intro ​

Card

Cards sind visuelle Container, die eine zusammengehörige Gruppierung von Inhalten und Aktionen darstellen. Sie heben sich vom Rest des Layouts ab, um die Aufmerksamkeit auf ihre Inhalte zu lenken. Eine Card kann unterschiedliche Arten von Informationen wie Text, Bilder oder Statusindikatoren bündeln und die zugehörigen Interaktionen (z. B. Buttons und Links) direkt sichtbar machen. Als eigenständiges Element dienen Cards der Organisation komplexer Oberflächen und helfen Nutzern, Inhalte schneller zu erfassen und direkt damit zu interagieren.

Verwendung ​

👍 Do👎 Don't
… wenn Inhalte kompakt und als zusammengehörige Einheit dargestellt werden sollen (z. B. Bürgeranliegen, Verwaltungsfälle, Veranstaltungsinfos).
... wenn der Nutzer innerhalb einer Sammlung von gleich strukturierten Elementen schnell vergleichen soll (z. B. mehrere Online-Prozesse).
... wenn eine visuelle Gruppierung geschafft werden soll – verwende sie, um Inhalte (Bild, Titel, Text, Aktionen) klar voneinander abzugrenzen und die Lesbarkeit zu erhöhen.		... wenn viele Aktionen möglich sind – mehr als 2–3 primäre Handlungen in einer Card wirken überladen.
... wenn die Komponente als generelles Layout-Element verwendet werden soll – Cards sind keine Ersatzlösung für Spalten, Container oder Grid-Systeme.
…wenn der Inhalt zu groß oder textlastig ist, sodass er die Struktur der Card sprengt (z. B. lange Fließtexte, umfangreiche Tabellen).
…wenn nur ein einzelnes isoliertes Element angezeigt werden soll, das keine visuelle Abgrenzung braucht (z. B. nur ein Button oder nur ein Icon).

Guidelines ​

Aufbau ​

Aufbau einer Card Komponente

Cards lassen sich abhängig von Inhalt und Anwendungsfall flexibel gestalten. Das Beispiel zeigt eine vollständig ausgebaute Variante mit allen verfügbaren Elementen:

  1. Media – Unterstützt den Inhalt der Card visuell und bietet Platz für ein Bild, Video oder Symbol.
  2. Header – Kopfbereich, der aus einem Prefix, einem Titel mit Untertitel und einem Suffix bestehen kann.
  3. Content – Der zentrale Inhaltsbereich einer Card. Hier kann variabler Content wie Text, Listen oder andere Komponenten platziert werden. Im Beispiel: reiner Text.
  4. Footer – Fußbereich, in dem zusätzliche Funktionen wie Buttons, Links oder Icons untergebracht werden.

Alle Elemente einer Card sind optional und können je nach Anwendungsfall weggelassen werden. Eine Minimal-Card besteht beispielsweise nur aus dem Content-Bereich.

Varianten ​

Cards sind sowohl in vertikaler als auch in horizontaler Ausrichtung verfügbar.

  • Vertikal: Elemente werden von oben nach unten angeordnet (Media → Header → Content → Footer).
  • Horizontal: Das Bild ist links platziert. Die anderen Elemente werden von oben nach unten angeordnet.

Die Ausrichtung kann abhängig vom Use Case angepasst werden.

Varianten der Card Komponente

  1. Vertikale Card
  2. Horizontale Card

Beispiele ​

Variabel einsetzbar ​

Cards sind vielseitige UI-Elemente, die Inhalte kompakt und visuell strukturiert darstellen. Die folgenden Beispiele zeigen unterschiedliche Varianten und Ausrichtungen, wie Karten je nach Kontext und Inhalt eingesetzt werden können. Bei der Gestaltung sind auch die Guidelines der verwendeten Komponenten zu beachten.

Beispiele für Cards

Einheitliche Verwendung ​

Werden mehrere Cards für den gleichen Use Case verwendet ist ein einheitliches visuelles Design sicherzustellen. Dadurch wird die Wiedererkennbarkeit unterstützt und die Orientierung für Nutzer erleichtert.

Beispiel für Konsistenz

Verhalten ​

Eine Card Komponente kann an sich auch interaktiv sein. In diesem Fall ist die gesamte Fläche klickbar und führt zu einer anderen Seite oder weiteren Aktion. In diesem Fall ist der Klickbereich eindeutig erkennbar (z. B. durch Hover-States, Cursor-Wechsel oder visuelle Hervorhebungen). Zusätzlich muss die Aktion klar kommuniziert werden.

Hinweis:

Diese Funktion ist aktuell noch nicht verfügbar, aber bereits für eine zukünftige Version geplant.

Responsive Verhalten ​

Cards passen sich flexibel an unterschiedliche Bildschirmgrößen und Layouts an.

In schmalen Ansichten (z. B. Mobile) wird die vertikale Variante verwendet, um maximale Lesbarkeit und Bedienbarkeit zu gewährleisten. Auf größeren Viewports (Tablet, Desktop) kann auch die horizontale Card verwendet werden.

Alle Inhalte und Interaktionen innerhalb der Card skalieren und passen sich dem verfügbaren Platz an, ohne die Lesbarkeit oder die Klickflächen zu beeinträchtigen. Die Komponenten in der Card behalten ihr eigenes responsives Verhalten.

Barrierefreiheit ​

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") kann durch die Cards navigiert werden. Einzelne Optionen lassen sich dann mit den Pfeiltasten ansteuern. Ist eine Option im Fokus, kann diese mittels Wagenrückholtaste ("Return"), Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgewählt werden. Alle Interaktionselemente in den Cards müssen – wie in den Beschreibungen der jeweiligen Komponenten festgelegt – über die Tastatur bedienbar sein.

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-card-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.card.Card;
import com.vaadin.flow.component.card.CardVariant;

Variants ​

No media ​

java
Card card = new Card();
card.setTitle("Title");
card.setSubtitle("Subtitle");
card.setHeaderSuffix(new Badge("Information"));

No media horizontal ​

java
Card card = new Card();
card.addThemeVariants(CardVariant.HORIZONTAL);
card.setTitle("Title");
card.setSubtitle("Subtitle");
card.setHeaderSuffix(new Badge("Information"));

Cover media ​

java
Card card = new Card();
card.addThemeVariants(CardVariant.COVER_MEDIA);
card.setMedia(new Image("/image.jpg", "Alt text"));
card.setTitle("Title");
card.setSubtitle("Subtitle");
card.setHeaderSuffix(new Badge("Information"));

Cover media horizontal ​

java
Card card = new Card();
card.addThemeVariants(CardVariant.COVER_MEDIA, CardVariant.HORIZONTAL);
card.setMedia(new Image("/image.jpg", "Alt text"));
card.setTitle("Title");
card.setSubtitle("Subtitle");
card.setHeaderSuffix(new Badge("Information"));

Full ​

java
Card card = new Card();
card.addThemeVariants(CardVariant.COVER_MEDIA);
card.setMedia(new Image("/image.jpg", "Alt text"));
card.setHeaderPrefix(new Image("/image.jpg", "Alt text"));
card.setTitle("Title");
card.setSubtitle("Subtitle");
card.setHeaderSuffix(new Badge("Information"));
card.add(new Div("Text content: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."));
card.addToFooter(new Button("Button 1"), new Button("Button 2"), new Button("Button 3"));