From f55e568e2a1d7819c8b4fa3717381467bd2f1bda 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:30:08 +0200
Subject: [PATCH] Add left 15 percent group card with three notification
 variants

---
 patterns/vsf-list-detailseite.html         | 46 ++++++++++++++++++++++
 styles/33-layouts-vsf-list-detailseite.css | 23 +++++++++++
 2 files changed, 69 insertions(+)

diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html
index 55544da..b7cd138 100644
--- a/patterns/vsf-list-detailseite.html
+++ b/patterns/vsf-list-detailseite.html
@@ -112,6 +112,52 @@
       </div>
       <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
     </div>
+
+    <div class="sg-vsf-list-detail-page__content">
+      <aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen">
+        <p class="sg-preview-label">Component: Group Card</p>
+        <div class="sg-group-card" data-component="group-card">
+          <article class="sg-card" data-component="notification-card" data-component-context="group-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" data-component-context="group-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" data-component="notification-card" data-component-context="group-card">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-card-segment--text-dark" 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>
+      </aside>
+    </div>
   </section>
 
   <script src="../scripts/help-icon-overlays.js"></script>
diff --git a/styles/33-layouts-vsf-list-detailseite.css b/styles/33-layouts-vsf-list-detailseite.css
index 381a78f..05222d1 100644
--- a/styles/33-layouts-vsf-list-detailseite.css
+++ b/styles/33-layouts-vsf-list-detailseite.css
@@ -37,8 +37,31 @@
   width: min(60vw, 100%);
 }
 
+.sg-vsf-list-detail-page__content {
+  display: flex;
+  width: 100%;
+}
+
+.sg-vsf-list-detail-page__left-column {
+  width: 15%;
+  min-width: 15%;
+}
+
+.sg-vsf-list-detail-page__left-column .sg-group-card {
+  width: 100%;
+}
+
 @media (max-width: 767px) {
   .sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
     width: 100%;
   }
+
+  .sg-vsf-list-detail-page__content {
+    display: block;
+  }
+
+  .sg-vsf-list-detail-page__left-column {
+    width: 100%;
+    min-width: 0;
+  }
 }