From 95b25a2d22b78590c56f3a1d3293089841e11649 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 1 Jun 2026 16:29:13 +0200
Subject: [PATCH] Extract notification card into notifications pattern

---
 components/cards.html       | 51 -----------------------------
 index.html                  |  1 +
 patterns/notifications.html | 64 +++++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 51 deletions(-)
 create mode 100644 patterns/notifications.html

diff --git a/components/cards.html b/components/cards.html
index 5bb7298..dffb174 100644
--- a/components/cards.html
+++ b/components/cards.html
@@ -63,57 +63,6 @@
     </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>
-
-      <article class="sg-card sg-card--notification-white" data-component="notification-card">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--white" 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--white" 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/index.html b/index.html
index 5d91efe..e24fd7d 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,7 @@
         <li><a href="./patterns/object-card.html">Object Card</a></li>
         <li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
         <li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
+        <li><a href="./patterns/notifications.html">Notifications</a></li>
         <li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
         <li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
         <li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
diff --git a/patterns/notifications.html b/patterns/notifications.html
new file mode 100644
index 0000000..b930d61
--- /dev/null
+++ b/patterns/notifications.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Pattern Notifications</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Pattern – Notifications</h1>
+
+  <section id="pattern-notifications">
+    <p class="sg-preview-label">Pattern: Notifications</p>
+
+    <div class="sg-preview-area">
+
+      <article class="sg-card" data-pattern="notification" 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-pattern="notification" 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>
+
+      <article class="sg-card sg-card--notification-white" data-pattern="notification" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--white" 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--white" 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>
+
+</body>
+</html>