diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index 147967a..7d541b1 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -47,6 +47,15 @@
+
Pattern Card Breiten
+
+ | Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
+
+ | layout-object-group-card-min-width | dimension-object-card-min-width | Mindestbreite der Karteninstanzen im Pattern Object Group Card. |
+ | layout-object-group-card-max-width | dimension-object-card-max-width | Maximalbreite der Karteninstanzen im Pattern Object Group Card. |
+
+
+
Text Group Box
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
index c75e0a4..88eb5b7 100644
--- a/semantic-tokens-patterns.html
+++ b/semantic-tokens-patterns.html
@@ -47,6 +47,12 @@
| surface-object-card-lower-segment | color-white | Hintergrundfläche der unteren zwei Segmente der Object Card. |
+ Object Group Card
+ | Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
+ | layout-object-group-card-min-width | dimension-object-card-min-width | Mindestbreite der einzelnen Karten im Pattern Object Group Card. |
+ | layout-object-group-card-max-width | dimension-object-card-max-width | Maximalbreite der einzelnen Karten im Pattern Object Group Card. |
+
+
Company Card
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
| text-company-card-data-negative | chart-value-negative | Textfarbe für negative Kennzahlenwerte im Data-Columns-Segment der Company Card. |
diff --git a/styleguide.css b/styleguide.css
index b7e9804..6609c5d 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -164,6 +164,8 @@
--layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
--layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
+ --layout-object-group-card-min-width: var(--dimension-object-card-min-width);
+ --layout-object-group-card-max-width: var(--dimension-object-card-max-width);
--surface-object-card-lower-segment: var(--color-white);
--text-company-card-data-negative: var(--chart-value-negative);
--text-company-card-moat-neutral: var(--chart-value-neutral);
@@ -1806,6 +1808,12 @@ section + section {
margin-top: auto;
}
+.sg-object-card[data-pattern="object-group-card"] {
+ flex: 1 1 var(--layout-object-group-card-min-width);
+ min-width: var(--layout-object-group-card-min-width);
+ max-width: var(--layout-object-group-card-max-width);
+}
+
.sg-object-group-card__hint {
color: var(--color-font-light);
}