From e70ac7dbe8d6d068610f83df958c9dbfe7472e77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 18 May 2026 19:40:04 +0200
Subject: [PATCH] Add multisegment card component example

---
 components/cards.html | 31 +++++++++++++++++++++++++++++++
 styleguide.css        |  8 ++++++++
 2 files changed, 39 insertions(+)

diff --git a/components/cards.html b/components/cards.html
index f56983c..ed44b04 100644
--- a/components/cards.html
+++ b/components/cards.html
@@ -117,6 +117,37 @@
     </div>
   </section>
 
+  <!-- Component: Multisegment Card -->
+  <section id="component-multisegment-card">
+    <p class="sg-preview-label">Component: Multisegment Card</p>
+
+    <div class="sg-preview-area">
+
+      <article class="sg-card" data-component="multisegment-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+          <div class="sg-strong">Multisegment Card</div>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--gray" data-component-part="card-segment">
+          <p class="sg-body">Erstes graues Segment mit Textinhalt.</p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--gray" data-component-part="card-segment">
+          <p class="sg-body">Zweites graues Segment mit Textinhalt.</p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--white" data-component-part="card-segment">
+          <p class="sg-body">Erstes weißes Segment.</p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--white" data-component-part="card-segment">
+          <p class="sg-body">Zweites weißes Segment.</p>
+        </div>
+      </article>
+
+    </div>
+  </section>
+
   <!-- Component: Transparent Card -->
   <section id="component-transparent-card">
     <p class="sg-preview-label">Component: Transparent Card</p>
diff --git a/styleguide.css b/styleguide.css
index ce5face..637a284 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1906,6 +1906,14 @@ section + section {
   background: var(--surface-card-header-muted);
 }
 
+.sg-card-segment--gray {
+  background: var(--surface-card-body);
+}
+
+.sg-card-segment--white {
+  background: var(--surface-object-card-lower-segment);
+}
+
 .sg-card--content-card {
   --surface-card-header-primary: var(--surface-content-block-card-title);
   --surface-card-body: var(--surface-content-block-card-content);