diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
index de7446d..6af69ce 100644
--- a/semantic-tokens-patterns.html
+++ b/semantic-tokens-patterns.html
@@ -54,6 +54,14 @@
| layout-object-group-card-max-width | dimension-object-group-card-max-width | Maximalbreite der einzelnen Karten im Pattern Object Group Card. |
+ Notifications
+ | Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck im Pattern |
+ | layout-notifications-card-flex-basis | layout-object-card-min-width | Flex-Basis der Notification Card im Notifications-Pattern; gilt auch in der dokumentierten Variante innerhalb von .sg-group-card. |
+ | layout-notifications-card-min-width | layout-object-card-min-width | Mindestbreite der Notification Card im Notifications-Pattern; verhindert zu frühes Schrumpfen bei Viewport-Änderungen. |
+ | layout-notifications-card-max-width | layout-object-card-max-width | Maximalbreite der Notification Card im Notifications-Pattern; begrenzt Wachstum konsistent zur Object-Card-Breite. |
+ | layout-notifications-text-segment-fixed-height | 150px | Fixe Desktop-Höhe des ersten Text-Segments im Notifications-Pattern; auf Mobile wird die Höhe auf auto gesetzt. |
+
+
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/styles/01-foundations.css b/styles/01-foundations.css
index 592c1f1..959030a 100644
--- a/styles/01-foundations.css
+++ b/styles/01-foundations.css
@@ -170,6 +170,9 @@
--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-notifications-card-flex-basis: var(--layout-object-card-min-width);
+ --layout-notifications-card-min-width: var(--layout-object-card-min-width);
+ --layout-notifications-card-max-width: var(--layout-object-card-max-width);
--layout-notifications-text-segment-fixed-height: 150px;
--layout-object-group-card-min-width: var(--dimension-object-group-card-min-width);
--layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
diff --git a/styles/28-patterns-notifications.css b/styles/28-patterns-notifications.css
index 64161bd..2f6ade0 100644
--- a/styles/28-patterns-notifications.css
+++ b/styles/28-patterns-notifications.css
@@ -11,9 +11,17 @@
}
.sg-notifications-pattern__card {
- flex: 1 1 var(--layout-object-card-min-width);
- min-width: var(--layout-object-card-min-width);
- max-width: var(--layout-object-card-max-width);
+ flex: 1 1 var(--layout-notifications-card-flex-basis);
+ min-width: var(--layout-notifications-card-min-width);
+ max-width: var(--layout-notifications-card-max-width);
+}
+
+/* Dokumentierte Pattern-Variante: Notifications innerhalb Group Card */
+.sg-notifications-pattern.sg-group-card > .sg-notifications-pattern__card {
+ flex: 1 1 var(--layout-notifications-card-flex-basis);
+ min-width: var(--layout-notifications-card-min-width);
+ max-width: var(--layout-notifications-card-max-width);
+ width: auto;
}
.sg-notifications-pattern.sg-notifications-pattern--multi-row .sg-notifications-pattern__card {