Card

Beispiel

Wir unterscheiden zwei Typen von Cards: Icon Cards und Dashboard Cards.

Icon Cards: Diese enthalten Informationen und Aktionen zum Thema und sind durch ein Icon gekennzeichnet.

Icon Cards bestehen aus einem Titel und optional einer kurzen Beschreibung. Ein Pfeil unten signalisiert, dass man nach dem Klick auf den Pfeil oder die gesamte Karte zu anderem Inhalt weitergeleitet wird.

Dashboard Cards: Diese sind bisher für mobile Anwendungen verwendbar und vor allem für Dashboards gedacht, um aktuelle Informationen anzuzeigen und zu bestimmten Inhalten weiterzuleiten.

Dashboard Cards bestehen aus einem Titel und Text. Der Text ist standardmäßig für maximal drei Zeilen gedacht, es ist aber möglich, mehr zu schreiben. Dashboard Cards können optional einen Status-Pill anzeigen. Nach dem Klick auf die gesamte Karte wird man optional zu anderem Inhalt weitergeleitet.

Interaktionen

Card kann einen Default-, Hover- und Pressed-Zustand darstellen.

Für den Hover-Effekt wird im Light Mode mit Schatten gearbeitet, im Dark Mode wird die Farbe geändert. Um den Pressed-Zustand zu verdeutlichen, wird in beiden Modi die Hintergrundfarbe angepasst.

Icon Card

Dashboard Card

Live Demo

Diese Live Demo zeigt die Card Komponente in Web-Component Technologie.

Showcases