Add multisegment card component example

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>

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);