Card-Pattern

Card-Pattern ist ein UI-Designmuster, das Inhalte in eigenständige, rechteckige Container (Cards) gruppiert, die als diskrete Einheiten wahrgenommen werden und klar voneinander abgegrenzt sind.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Kachel, Tile, Content Card, Material Card, Info-Card

Was ist das Card-Pattern?

Das Card-Pattern wurde durch Google Material Design 2014 als offizielle Komponente definiert und popularisiert, existiert aber in der UX-Praxis seit den frühen Tagen von Pinterest (2010), das das Masonry-Card-Grid-Layout quasi erfunden hat. Eine Card ist im Kern ein semantisch zusammengehöriger Inhaltsbaustein: Ein Bild, ein Titel, eine Beschreibung und eine Aktion gehören zusammen und werden als Einheit präsentiert, die als Ganzes interagierbar ist.

Erklärung

Card-Anatomie

Eine vollständige Card besteht typischerweise aus:

1. Media-Bereich (optional): Bild, Video-Thumbnail oder Illustration. Üblicherweise oben, seltener links (horizontal card)
2. Content-Bereich: Titeltext, Beschreibungstext (2–3 Zeilen), Metadaten (Datum, Autor, Kategorie)
3. Aktions-Bereich (optional): Buttons oder Links — "Mehr erfahren", "Kaufen", Icons für Share, Bookmark, Like
4. Container: Begrenzender Rahmen mit definierter Elevation/Border

Nicht alle Cards brauchen alle vier Bereiche. Eine Blog-Post-Card braucht keinen Aktions-Bereich, wenn die ganze Card klickbar ist. Eine Produkt-Card braucht keinen separaten Aktions-Bereich, wenn "In den Warenkorb" bereits prominent ist.

Elevation und Tiefe

Elevation (Schatten) ist das primäre Mittel, um Cards visuell vom Hintergrund zu trennen und ihre Klickbarkeit zu signalisieren. Drei Abstufungen sind üblich:

• Resting State: Kleiner, weicher Schatten (0 2px 8px rgba(0,0,0,0.08))
• Hover State: Größerer, stärkerer Schatten (0 8px 24px rgba(0,0,0,0.15)) + leichte Y-Verschiebung nach oben
• Pressed/Active State: Reduzierter Schatten (Card gedrückt wirkend)

Alternativ zu Schatten können Cards durch 1px solid #E0E0E0 Border definiert werden (flaches Design). Diese Entscheidung hängt vom Gesamtstil des Design-Systems ab.

Hover-States

Hover-States kommunizieren Interaktivität (Affordance) — sie zeigen, dass die Card klickbar ist. Übliche Hover-Effekte:

• Elevation-Erhöhung: Schatten wird größer/tiefer
• Subtle Translate: Card hebt sich um 2–4 px nach oben (transform: translateY(-2px))
• Cursor-Wechsel: cursor: pointer
• Overlay: Transparenter dunkler oder heller Overlay über dem Card-Bild

Wichtig: Hover-Effekte sollten dezent und konsistent sein. Zu starke Animationen wirken billig. Transition: 150–200ms ease-out.

Card Grid vs. List View

Card Grid:

• Jede Card hat gleiche Breite, Höhe kann variieren (Masonry) oder fest sein
• Ideal für visuelle Inhalte (Produkte, Bilder, Artikel mit großen Vorschaubildern)
• Scan-Modus: Nutzer scannen visuell, nicht linear
• Typische Spaltenanzahl: 4 (Desktop) → 2 (Tablet) → 1 (Mobile) mit CSS Grid/Flexbox

List View:

• Cards in voller Breite, horizontal aufgebaut (Bild links, Text rechts)
• Ideal für textlastige Inhalte oder wenn die Reihenfolge semantisch wichtig ist
• Linear-Scan: Nutzer lesen von oben nach unten
• Effizientere Darstellung wenn viele Cards geladen werden (weniger Scroll)

Kombiniertes Pattern: Viele Anwendungen bieten einen "Grid/List"-Toggle an. Amazon Produktsuche, Airbnb-Suchergebnisse und GitHub-Repositories haben alle dieses Toggle-Muster, weil verschiedene Nutzertypen verschiedene Darstellungen bevorzugen.

Interaktive Cards

Eine Card kann zwei Interaktionsmodi haben:

1. Ganzheitlich klickbar: Gesamte Card ist ein Link/Button → maximale Touch-Fläche
2. Partiell klickbar: Titel und Bild führen zu Detailseite, Buttons in der Card führen zu separaten Aktionen

Ganzheitlich klickbare Cards sind mobiler-freundlicher und einfacher. Partiell klickbare Cards sind nötig, wenn mehrere verschiedene Aktionen pro Card existieren (z. B. "Zur Playlist hinzufügen" vs. "Künstler aufrufen").

Beispiele

1. Pinterest: Das Ur-Masonry-Grid mit Cards unterschiedlicher Höhe. Card enthält ausschließlich Bild + optionalen Titel. Minimal, visuell dominant. Hover zeigt "Speichern"-Button im Overlay.
2. Airbnb Suchergebnisse: Horizontal-Card auf Desktop (Bild links, Details rechts), Grid-Card auf Mobile. Hover auf Desktop hebt die Karte in der Karte hervor. Hervorragend responsive.
3. Spotify Alben/Playlists: Quadratische Cards mit Artwork, Titel, Untertitel und Hover-Play-Button-Overlay. Das Play-Button-Overlay erscheint nur on Hover — klare Affordanz-Kommunikation.
4. Google News: Horizontale List-View-Cards für Desktop mit Bild-Thumbnail rechts, Artikelinfo links. Grid für Mobile. Die Wahl des List-Modus auf Desktop reflektiert den Leseprimat von Text.
5. Trello: Die bekannteste "Task Card" in der Softwarewelt. Minimale Cards ohne Bild in einem Kanban-Layout. Drag-and-Drop-Interaktion macht die Card zu einem beweglichen Objekt — eine eigene Erweiterung des Musters.

In der Praxis (Figma-Umsetzung)

Basis-Card-Komponente:

1. Frame mit Drop Shadow: X:0, Y:2, Blur:8, Color: rgba(0,0,0,0.08)
2. Border-Radius: 8–16 px (abhängig vom Design-System)
3. Overflow: Hidden (verhindert, dass Bilder aus dem Radius herausstehen)
4. Auto-Layout Vertikal: Media-Slot (feste Höhe, z. B. 180 px), Content (Padding 16 px), Aktionen (Border-Top, 8 px Padding)

Varianten-Properties:

• size: small / medium / large
• orientation: vertical / horizontal
• hasImage: true / false
• hasActions: true / false
• state: default / hover / pressed / loading / skeleton

Hover-State: In Figma Variants: state: hover → Schatten 0 8px 24px rgba(0,0,0,0.15), Y-Offset der Card -2 (simuliert translateY). Interactive Component Feature in Figma ermöglicht echte Hover-Interaktion.

Responsive Grid: Nutze Figma's Auto-Layout mit Wrap Eigenschaft und Spaltenanzahl-Varianten. Oder dokumentiere in einer separaten "Responsive Grid"-Frame die Breakpoints (1200px: 4 Spalten, 768px: 2, 375px: 1).

Vergleich & Abgrenzung

Card vs. List-Item: Eine Card ist ein eigenständiger Container mit visueller Abgrenzung. Ein List-Item ist Teil einer kontinuierlichen Liste ohne individuelle Container-Abgrenzung. Cards betonen Autonomie, List-Items betonen Zusammengehörigkeit.

Card vs. Tile: In einigen Design-Systemen sind Tiles flache, icon-orientierte Navigationselemente ohne Inhaltshierarchie. Cards haben immer eine interne Inhaltshierarchie (Titel > Beschreibung > Aktion).

Häufige Fragen (FAQ)

Sollen alle Cards in einem Grid gleich hoch sein? Einheitliche Höhe (fixed height) erleichtert visuelle Raster-Ordnung und ist einfacher zu layouten. Flexible Höhe (Masonry) maximiert die Informationsdichte und vermeidet weißen Leerraum in kurzen Cards. Die Wahl hängt vom Inhaltstyp ab: Produkte mit gleichförmigen Beschreibungen → fixed height, Bilder mit variablen Proportionen → Masonry.

Wie viele Aktions-Buttons sollte eine Card haben? Maximal zwei primäre Aktionen. Bei mehr als zwei Aktionen sollte eine als primäre Aktion (Primary Button) und die restlichen als Icons oder im Overflow-Menü (drei-Punkte-Menü) erscheinen.

Verwandte Einträge

• Skeleton Loader — Placeholder beim Laden von Card-Lists
• Filter und Sorting UI — Card-Grids filtern und sortieren
• Pagination vs. Infinite Scroll — Card-Grids paginieren

Weiterführend

• Lidwell, W., Holden, K. & Butler, J. (2010). Universal Principles of Design. Rockport Publishers.
• Google Material Design 3 (2023). Cards. m3.material.io.
• Nielsen Norman Group (2019). Cards: UI-Component Definition. nngroup.com.
• Krug, S. (2014). Don't Make Me Think, Revisited. New Riders.