From c5ed75c20fd3084a6e628a4359c59743af74ae51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 18 May 2026 17:41:20 +0200
Subject: [PATCH] Update cards component labels and add content card example

---
 components/cards.html | 33 +++++++++++++++++++++++++++------
 styleguide.css        |  7 +++++++
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/components/cards.html b/components/cards.html
index bf1f8fb..f56983c 100644
--- a/components/cards.html
+++ b/components/cards.html
@@ -18,15 +18,15 @@
   <!-- Components                                                -->
   <!-- ========================================================= -->
 
-  <!-- Component: Card -->
+  <!-- Component: Objekt Cards -->
   <section id="component-card">
-    <p class="sg-preview-label">Component: Card</p>
+    <p class="sg-preview-label">Component: Objekt Cards</p>
 
     <div class="sg-preview-area">
 
       <article class="sg-card" data-component="card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-          <div class="sg-strong">Card Header</div>
+          <div class="sg-strong">Objekt Card 1</div>
         </div>
 
         <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
@@ -38,7 +38,7 @@
 
       <article class="sg-card" data-component="card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header">
-          <div class="sg-strong">Alternative Header</div>
+          <div class="sg-strong">Objekt Card 2</div>
         </div>
 
         <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
@@ -50,7 +50,7 @@
 
       <article class="sg-card" data-component="card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkbrown" data-component-part="card-header">
-          <div class="sg-strong">Darkbrown Header</div>
+          <div class="sg-strong">Objekt Card 3</div>
         </div>
 
         <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
@@ -63,6 +63,27 @@
     </div>
   </section>
 
+  <!-- Component: Content Card -->
+  <section id="component-content-card">
+    <p class="sg-preview-label">Component: Content Card</p>
+
+    <div class="sg-preview-area">
+
+      <article class="sg-card sg-card--content-card" data-component="content-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+          <div class="sg-strong">Content Card</div>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus, turpis vel porttitor cursus, nibh justo feugiat sem, sit amet egestas lorem arcu sed augue. Donec sed lorem in urna sagittis.
+          </p>
+        </div>
+      </article>
+
+    </div>
+  </section>
+
   <!-- Component: Group Card -->
   <section id="component-group-card">
     <p class="sg-preview-label">Component: Group Card</p>
@@ -112,4 +133,4 @@
   </section>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/styleguide.css b/styleguide.css
index 3d21663..4acae9c 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1894,6 +1894,13 @@ section + section {
   background: var(--surface-card-header-muted);
 }
 
+.sg-card--content-card {
+  --surface-card-header-primary: var(--surface-content-block-card-title);
+  --surface-card-body: var(--surface-content-block-card-content);
+  --text-card-header: var(--text-content-block-card-title);
+  --text-card-body: var(--text-content-block-card-content);
+}
+
 .sg-card-segment + .sg-card-segment {
   box-shadow: inset 0 1px 0 var(--divider-card-segment);
 }