From c4e14396fc81f839a3b3f7ab04174a15619d9e30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 21 May 2026 11:35:23 +0200
Subject: [PATCH] Add VSF drawer object card with two-column white detail text

---
 patterns/vsf-card-listen-seite.html | 43 ++++++++++-------------------
 semantic-tokens-components.html     | 12 ++++++++
 styleguide.css                      | 26 +++++++++++++++++
 3 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/patterns/vsf-card-listen-seite.html b/patterns/vsf-card-listen-seite.html
index e3912a3..acb2f69 100644
--- a/patterns/vsf-card-listen-seite.html
+++ b/patterns/vsf-card-listen-seite.html
@@ -683,34 +683,21 @@
         </div>
       </div>
 
-      <div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Fundamentalanalyse Karten Gruppe">
-        <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1">
-          <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-            <div class="sg-strong">Box 1</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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
-          </div>
-        </article>
-
-        <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2">
-          <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-            <div class="sg-strong">Box 2</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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
-          </div>
-        </article>
-
-        <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3">
-          <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-            <div class="sg-strong">Box 3</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. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
-          </div>
-        </article>
-      </div>
+      <article class="sg-card sg-object-card sg-vsf-drawer-object-card" data-pattern="object-card" aria-label="Objekt Card Western Digital Corporation">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
+          <h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
+          <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--two-column sg-vsf-drawer-object-card__text" data-pattern-part="text-block-two-column">
+            Ticker: WDC
+            Region: Amerika
+            Sub-Region: Nordamerika
+            Land: Vereinigte Staaten von Amerika
+            ISIN: US9581021055
+            Industrie: Computer Hardware
+          </p>
+        </div>
+      </article>
 
       <div class="sg-navigation-card-layout">
         <div class="sg-navigation-card-block">
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index a423901..e8656d0 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -64,6 +64,18 @@
         <tr><td>text-card-transparent</td><td>color-font-light</td><td>Textfarbe der Text-Group-Box.</td></tr>
       </tbody>
     </table>
+
+    <h3 class="sg-sub-heading sg-section-h3">VSF Drawer Object Card</h3>
+    <table class="sg-foundation-table sg-table-label">
+      <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
+      <tbody>
+        <tr><td>surface-vsf-drawer-object-card-header</td><td>color-darkblue</td><td>Header-Fläche der VSF-spezifischen Object Card im Drawer.</td></tr>
+        <tr><td>surface-vsf-drawer-object-card-body</td><td>color-darkblue</td><td>Body-Fläche der VSF-spezifischen Object Card im Drawer.</td></tr>
+        <tr><td>text-vsf-drawer-object-card-heading</td><td>color-font-light</td><td>Textfarbe der H2-Überschrift im Header der VSF Drawer Object Card.</td></tr>
+        <tr><td>text-vsf-drawer-object-card-body</td><td>color-font-light</td><td>Textfarbe der Detailinhalte im Body der VSF Drawer Object Card.</td></tr>
+        <tr><td>layout-vsf-drawer-object-card-column-gap</td><td>spacing-large</td><td>Spaltenabstand des zweispaltigen Textlayouts in der VSF Drawer Object Card.</td></tr>
+      </tbody>
+    </table>
   </section>
 
   <section id="semantic-interactive">
diff --git a/styleguide.css b/styleguide.css
index 725e565..a2aa76f 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -180,6 +180,11 @@
   --text-content-block-card-content: var(--color-font-dark);
   --text-card-list-drawer: var(--color-font-dark);
   --layout-card-list-drawer-width: var(--dimension-card-list-drawer-width);
+  --surface-vsf-drawer-object-card-header: var(--color-darkblue);
+  --surface-vsf-drawer-object-card-body: var(--color-darkblue);
+  --text-vsf-drawer-object-card-heading: var(--color-font-light);
+  --text-vsf-drawer-object-card-body: var(--color-font-light);
+  --layout-vsf-drawer-object-card-column-gap: var(--spacing-large);
 
   /* Typography */
   --font-family-base: "Open Sans", sans-serif;
@@ -2080,6 +2085,27 @@ section + section {
   width: 100%;
 }
 
+.sg-vsf-drawer-object-card {
+  --surface-card-header-primary: var(--surface-vsf-drawer-object-card-header);
+  --surface-object-card-lower-segment: var(--surface-vsf-drawer-object-card-body);
+  --text-card-header: var(--text-vsf-drawer-object-card-heading);
+  --text-card-body: var(--text-vsf-drawer-object-card-body);
+}
+
+.sg-vsf-drawer-object-card .sg-card-segment--body.sg-object-card__content {
+  color: var(--text-vsf-drawer-object-card-body);
+}
+
+.sg-vsf-drawer-object-card__text.sg-text-layout-pattern__sample--two-column {
+  color: var(--text-vsf-drawer-object-card-body);
+  column-gap: var(--layout-vsf-drawer-object-card-column-gap);
+}
+
+.sg-vsf-drawer-object-card__heading {
+  color: var(--text-vsf-drawer-object-card-heading);
+  margin: 0;
+}
+
 /* ========================================================= */
 /* Patterns: Text Layouts                                    */
 /* ========================================================= */