Properties
Elevation Level
Die Card ist in drei verschiedenen Elevation Levels verfügbar. Level 1, 2 und 3 unterscheiden sich durch die unterschiedliche Hintergrundfärbung mit den entsprechenden Background-Colors. Die verschiedenen Level können verwendet werden, um eine visuelle Hierarchie und Tiefenwirkung zu schaffen. Cards sollten nur bewusst eingesetzt werden um Inhalte sinnvoll zu ordnen oder Zusammenhänge darzustellen. Die willkürliche Platzierung sämtlicher Inhalte auf Cards sollte vermieden werden.
Spacing
Das Spacing definiert, mit welchem Abstand der Content innerhalb der Card Komponente platziert wird. Hier kann je nach Bedarf und Layout zwischen Small, Medium, Large und None gewählt werden.
Behavior
Je nach Anwendungsfall, kann die Card “Static” oder “Interactive” platziert werden. Bei Static weist die Komponente kein interaktives Verhalten auf und wird für die statische Platzierung von Inhalten verwendet. Das Interactive Verhalten zeichnet sich durch die einzelnen Interaction States (Enabled, Hovered, Pressed und Focused) aus, die eine Interaktionsmöglichkeit signalisieren. Interactive sollte nur verwendet werden, wenn per Klick auf die gesamte Card eine Aktion ausgelöst werden kann.
Examples
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Token
Border Height | db-border-height-3xs |
Border Radius | db-border-radius-sm |
Kurz, Knackig, Klar
Setze die Card-Komponente ein, wenn
- eine Gruppierung von ähnlichem Content notwendig ist
- visuell reichhaltige Inhalte wie Bilder oder Videos präsentiert werden sollen
- einheitliche Darstellung von Informationen gewünscht ist, insbesondere bei unterschiedlicher Textlänge
Guidelines to Go
- Verwendung
- Statische Card: Präsentiert Informationen
- Interaktive Card: Ermöglicht Nutzerinteraktion
- Gruppen Layout: Liste, Raster, Carousel
- Inhalt pro Card begrenzen
- Eigenschaften
- auf Hintergrundfarbe achten (Elevation Level)
- Weißraum schaffen (Padding- und Spacing-Tokens)
- Divider innerhalb der Card vermeiden
Verwendung
Usecase
Cards werden verwendet, um ähnlichen Content zu gruppieren, wodurch die kognitive Belastung reduziert wird und Nutzer den Inhalt besser scannen können.
🟢 ähnlicher Content ist in Cards gruppiert🔴 ähnlicher Content ist nicht gruppiert
Statisch vs. Interaktiv
Cards können sowohl statisch als auch interaktiv sein und bieten vielseitige Anwendungsmöglichkeiten:
- Statische Card: Ideal für die Präsentation von Informationen, die keine direkte Nutzerinteraktion erfordern. Anwendungsbeispiele sind Artikel, Beschreibungen, Bewertungen, Mitteilungen usw.
- Interaktive Card: Perfekt für Inhalte, die durch Nutzerinteraktionen ausgelöst werden, wie z.B. klickbare Anzeigen, Buchungsoptionen, interaktive Dashboards usw. Sie verfügt über verschiedene Interaction States, um dem Nutzer eine intuitive und reaktionsschnelle Benutzererfahrung zu bieten.
Card Gruppen
Das Listen-Layout ist ideal für sequentielle Informationen oder wenn der verfügbare Platz beschränkt ist. Ein symmetrisches Rasterlayout hilft, mehrere Cards gleichmäßig zu verteilen und eine klare Struktur zu bewahren. Ein Carousel wird eingesetzt, um mehrere visuell ansprechende Inhalte wie Bilder oder Angebote platzsparend und interaktiv zu präsentieren, Ähnliche oder zusammenhängende Cards sollten gruppiert werden, um Kontext und Bedeutung zu verstärken.
Content Ausrichtung
Beim Einsatz von Cards mit unterschiedlicher Textlänge ist es wichtig, auf eine konsistente Content-Ausrichtung zu achten, um visuelle Brüche im Grid zu vermeiden. Jede Card sollte eine einheitliche Größe und gleichmäßige Abstände beibehalten, unabhängig von der Textlänge.
🟢 Content Ausrichtung konsistent🟠 Content Ausrichtung nicht konsistent (z.B. Masonry Grid)
Content Verteilung
Platziere nicht zu viel Content in einer Card. Verteile den Content lieber auf mehrere Cards, um Überladung zu vermeiden und die Lesbarkeit zu verbessern.
🟢 Content auf zwei Cards verteilt🔴 Content auf einer Card
List vs Card
Listen sind geeignet für textbasierte, hierarchische oder lineare Inhalte. Listen haben eine einfachere Hierarchie und sollten bevorzugt verwendet werden, wenn visuelle Unterscheidung nicht notwendig ist. Cards sind hingegen ideal für die Gruppierung von ähnlichem Content mit visuellen Elementen und interaktiven Funktionen.
🟢 textbasierte & Lineare Inhalte als List🟠 textbasierte & Lineare Inhalte als Card
Eigenschaften
Hintergrund Farbe
Bei der Platzierung der Card sollten die Elevation Level berücksichtigt werden. Level 1 kann somit auf beliebigen Background-Levels platziert werden, während Level 2 beispielsweise nicht auf Level 1 platziert werden sollte. Grundsätzlich ist von einer übermäßigen Verschachtelung von Cards abzusehen.
🟢 Level 1 richtig platziert🔴 Level 2 auf Level 1 platziert
Weißraum
Der gezielte Einsatz der vorgegebenen Padding- und Spacing-Tokens schafft Weißraum und reduziert die kognitive Belastung. Verwende einheitliche Werte, um eine harmonische und konsistente Gestaltung sicherzustellen. Dies ermöglicht es den Nutzern, den Inhalt innerhalb der Cards besser zu scannen und die Informationen leichter zu verarbeiten.
🟢 ausreichend Padding und Spacing🔴 zu wenig Padding und Spacing
Divider
Verzichte nach Möglichkeit auf Divider in Cards, um das Design aufgeräumt und simpel zu halten. Ein einfaches Layout erleichtert die Nutzernavigation und verbessert die Gesamtübersichtlichkeit.
🟢 ohne Divider🟠 mit Divider
Du hast Fragen oder Input?
Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!
E-Mail schreiben Feedback in Github
Weiter