From ea38a2cee10fbede849d2a0e542862b67510edbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 10:14:56 +0200
Subject: [PATCH] Add Component Notification Card with signal variants

---
 components/cards.html          | 37 ++++++++++++++++++++++++++++++++++
 styles/40-components-cards.css | 11 +++++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/components/cards.html b/components/cards.html
index 707feb7..81d30cf 100644
--- a/components/cards.html
+++ b/components/cards.html
@@ -63,6 +63,43 @@
     </div>
   </section>
 
+  <!-- Component: Notification Card -->
+  <section id="component-notification-card">
+    <p class="sg-preview-label">Component Notification Card</p>
+
+    <div class="sg-preview-area">
+
+      <article class="sg-card" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" 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-red" 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" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" 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-green" 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>
+
+    </div>
+  </section>
+
   <!-- Component: Content Card -->
   <section id="component-content-card">
     <p class="sg-preview-label">Component: Content Card</p>
diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css
index c3e8478..80ad182 100644
--- a/styles/40-components-cards.css
+++ b/styles/40-components-cards.css
@@ -93,6 +93,16 @@
   background: var(--surface-card-header-muted);
 }
 
+.sg-card-segment--signal-red {
+  background: var(--color-signal-red);
+  color: var(--text-card-header);
+}
+
+.sg-card-segment--signal-green {
+  background: var(--color-signal-green);
+  color: var(--text-card-header);
+}
+
 .sg-card-segment--gray {
   background: var(--surface-card-segment-neutral);
 }
@@ -184,4 +194,3 @@
   margin: 0;
   color: var(--text-card-transparent);
 }
-