From be34e0444d578b8eb7cecaceb1ae51b9ff79437d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Wed, 10 Jun 2026 14:28:05 +0200 Subject: [PATCH] Add variable-height object card variant --- patterns/object-card.html | 66 ++++++++++++++++++++++++++++++ styles/22-patterns-object-card.css | 3 ++ 2 files changed, 69 insertions(+) diff --git a/patterns/object-card.html b/patterns/object-card.html index 75e6987..07c8c66 100644 --- a/patterns/object-card.html +++ b/patterns/object-card.html @@ -103,6 +103,72 @@ + +

Object Card variable height

+

Pattern: Object Card variable height

+

Hinweis: In dieser Variante ist die komplette Karte in der Höhe flexibel. Die Segmenthöhen ergeben sich direkt aus dem Inhalt, dadurch sind die Karten im Grid bewusst unterschiedlich hoch.

+ +
+
+
+
Alcon Inc.
+
+
+

Kurzer Inhalt für eine kompakte Karte mit wenig vertikalem Platzbedarf.

+
+
+
+ + +
+
+
+ +
+
+
Meyer Optik AG
+
+
+

Etwas längerer Text mit mehr Inhalt. Die Karte wächst hier sichtbar mit dem Segment, weil der Body bewusst mehr Umbruchzeilen erzeugt und damit die Höhe definiert.

+
+
+
+ + + +
+
+
+ +
+
+
Nordwind Therapeutics Holding
+
+
+

Der Inhalt ist hier knapp, aber die Karte bleibt flexibel und nimmt nur so viel Höhe ein wie die Segmente tatsächlich benötigen.

+
+
+
+ +
+
+
+ +
+
+
Valencia Holding Group International
+
+
+

Dies ist die längste Variante in der Demo. Sie zeigt, dass der Body die Kartenhöhe direkt mitprägt, ohne dass ein fixer Kartenrahmen die Inhalte begrenzt oder künstlich streckt.

+
+
+
+ + +
+
+
+