From a8066e468482d9788c22247d591eebd515992107 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 2 Jun 2026 12:14:09 +0200
Subject: [PATCH] Add yellow notifications pattern variant

---
 patterns/notifications.html    | 28 ++++++++++++++++++++++++++++
 styles/40-components-cards.css |  5 +++++
 2 files changed, 33 insertions(+)

diff --git a/patterns/notifications.html b/patterns/notifications.html
index 25e8d22..09e573e 100644
--- a/patterns/notifications.html
+++ b/patterns/notifications.html
@@ -43,6 +43,20 @@
         </div>
       </article>
 
+      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+            zum Unternehmen
+          </button>
+        </div>
+      </article>
+
       <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
           <p class="sg-body">
@@ -93,6 +107,20 @@
         </div>
       </article>
 
+      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+            zum Unternehmen
+          </button>
+        </div>
+      </article>
+
       <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header">
           <p class="sg-body">
diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css
index c273f2a..fce5486 100644
--- a/styles/40-components-cards.css
+++ b/styles/40-components-cards.css
@@ -103,6 +103,11 @@
   color: var(--text-card-header);
 }
 
+.sg-card-segment--signal-yellow {
+  background: var(--color-signal-yellow);
+  color: var(--text-card-header);
+}
+
 .sg-card-segment--gray {
   background: var(--surface-card-segment-neutral);
 }