Cards
Karten liegen als eigene Elemente in einem Card Wrapper. Der Wrapper entscheidet über die Anordnung – Gruppe, Deck, Masonry, Slider oder Flipper – die Karte selbst über Bild, Button, Rahmen und Effekt.
Unten die gebräuchlichen Anordnungen, dazu eine Karte ohne Bild und ein Wrapper, dessen FlexForm nie geöffnet wurde. Der letzte Fall hat heute früh das Frontend lahmgelegt.
Deck – drei gleich hohe Karten
Adamishütte
Wanderhütte
Kurzer Kartentext, absichtlich länger als die eingestellten 160 Zeichen, damit sich prüfen lässt, ob der Wrapper wirklich kürzt und die drei Karten trotzdem…
Hasenhütte
Mit Hover-Effekt
Diese Karte hat den Effekt „zoom and border“ in Primärfarbe. Der Text ist kürzer als bei der ersten – gleiche Höhe muss der Wrapper erzwingen.
[Randfall] Karte ohne Bild
Dritte Spalte
Kein Medium zugewiesen. Die Karte soll ohne Bildbereich rendern und die Spaltenhöhe der beiden Nachbarn halten, statt zu kippen.
Gruppe – nahtlos aneinander
Bild als Overlay
Der Kartenkörper liegt über dem Bild statt darunter. Bei hellen Motiven muss die Textfarbe angepasst werden – hier auf Weiß.
Horizontal
Bild und Text nebeneinander innerhalb der Karte. Die Bildbreite steuert imageColumnsWidth in Bootstrap-Spalten – hier 4 von 12.
Slider – Swiper mit Navigation und Autoplay
Slide eins
Im Slider-Modus rendert der Wrapper einen Swiper. Navigation, Pagination und Autoplay sind eingeschaltet, Endlosschleife ebenfalls.
Slide zwei
Bei aktiver Endlosschleife sollten mindestens doppelt so viele Karten vorhanden sein wie sichtbar – hier vier bei drei sichtbaren.
Slide drei – Hochformat
Ein hochformatiges Bild im 3:2-Rahmen des Wrappers. Hier zeigt sich, ob zugeschnitten oder verzerrt wird.
Slide vier
Vierte Karte, damit die Endlosschleife sauber umlaufen kann.
[Randfall] Card Wrapper ohne FlexForm
Einzelne Karte außerhalb eines Wrappers
Mit maxwidth
Eine Karte darf auch ohne Wrapper stehen. Dann begrenzt maxwidth ihre Breite auf die Bildbreite, sonst liefe sie über die volle Spalte.
Horizontal
Bild und Text nebeneinander innerhalb der Karte. Die Bildbreite steuert imageColumnsWidth in Bootstrap-Spalten – hier 4 von 12.