Card-Grid mit gleicher Höhe
h-100, row-cols und ein fester Bild-Crop: die drei Zutaten für ein Karten-Raster, das nicht ausfranst.
Ein Raster aus Cards sieht so lange gut aus, bis die Texte unterschiedlich lang sind. Dann franst die Zeile unten aus, und der Blick findet keine Kante mehr. Drei Zutaten lösen das. Erstens h-100 an…
Layout#Tag 2
Horizontale Cards für Listen
Bild links, Text rechts: wie sich eine Card für Listenansichten umbauen lässt, ohne eigene Media-Queries.
Für Listenansichten ist die klassische Card mit Bild oben oft zu hoch. Nebeneinander gestellt passen deutlich mehr Einträge auf den Bildschirm, ohne dass etwas verloren geht. Der Umbau kommt ohne…
LayoutGestaltung#Tag 2#Tag 3
Anatomie einer Card
Eine Card besteht aus einem optionalen Bild, einem Körper mit Titel und Text und optional einer Fußzeile. Alle drei Teile sind eigenständige Klassen, die sich frei kombinieren lassen. Für Teaser-Übersichten ist die Kombination aus Bild, Überschrift, zwei Sätzen Anreißer und einer Schaltfläche der bewährte Aufbau.