From 2a58f9228bdad74c2ae13ea41dac7c86b43bd311 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:59:23 +0200
Subject: [PATCH] Rebuild VSF drawer card on base card pattern without
 object-card layout rules

---
 patterns/vsf-card-listen-seite.html |  8 ++++----
 styleguide.css                      | 24 +++++++++++-------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/patterns/vsf-card-listen-seite.html b/patterns/vsf-card-listen-seite.html
index 8b31a48..3eea240 100644
--- a/patterns/vsf-card-listen-seite.html
+++ b/patterns/vsf-card-listen-seite.html
@@ -683,11 +683,11 @@
         </div>
       </div>
 
-      <article class="sg-card sg-object-card sg-vsf-drawer-object-card" data-component="card" data-pattern="card" aria-label="Card Western Digital Corporation">
-        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="card-header">
+      <article class="sg-card sg-vsf-drawer-card" data-component="card" data-pattern="card" aria-label="Card Western Digital Corporation">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-pattern-part="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="card-body">
+        <div class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content" data-pattern-part="card-body">
           <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
             <p class="sg-body sg-text-layout-pattern__column">
               Ticker: WDC<br>
@@ -701,7 +701,7 @@
             </p>
           </div>
         </div>
-        <footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="card-actions">
+        <footer class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__actions-segment" data-pattern-part="card-actions">
           <button class="sg-interaction-element sg-button" type="button">Geschäftsmodell</button>
         </footer>
       </article>
diff --git a/styleguide.css b/styleguide.css
index f10bf95..af6cd74 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2085,13 +2085,12 @@ section + section {
   width: 100%;
 }
 
-.sg-vsf-drawer-object-card {
+.sg-vsf-drawer-card {
   --surface-card-header-primary: var(--surface-vsf-drawer-object-card-header);
   --surface-card: var(--surface-vsf-drawer-object-card-body);
-  --surface-object-card-lower-segment: var(--surface-vsf-drawer-object-card-body);
+  --surface-card-body: 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);
-  --layout-object-card-height: auto;
   width: 100%;
   min-width: 0;
   max-width: none;
@@ -2099,27 +2098,26 @@ section + section {
   height: auto;
 }
 
-.sg-vsf-drawer-object-card .sg-card-segment--body.sg-object-card__content {
-  color: var(--text-vsf-drawer-object-card-body);
-  flex: 0 0 auto;
-}
-
-.sg-vsf-drawer-object-card .sg-text-layout-pattern__two-column,
-.sg-vsf-drawer-object-card .sg-text-layout-pattern__column {
+.sg-vsf-drawer-card__content {
   color: var(--text-vsf-drawer-object-card-body);
 }
 
-.sg-vsf-drawer-object-card .sg-text-layout-pattern__two-column {
+.sg-vsf-drawer-card .sg-text-layout-pattern__two-column,
+.sg-vsf-drawer-card .sg-text-layout-pattern__column {
+  color: var(--text-vsf-drawer-object-card-body);
+}
+
+.sg-vsf-drawer-card .sg-text-layout-pattern__two-column {
   gap: var(--layout-vsf-drawer-object-card-column-gap);
 }
 
-.sg-vsf-drawer-object-card .sg-card-segment--body.sg-object-card__actions-segment {
+.sg-vsf-drawer-card__actions-segment {
   display: flex;
   justify-content: flex-start;
   background: var(--surface-vsf-drawer-object-card-body);
 }
 
-.sg-vsf-drawer-object-card .sg-card-segment--body.sg-object-card__actions-segment .sg-interaction-element.sg-button {
+.sg-vsf-drawer-card__actions-segment .sg-interaction-element.sg-button {
   height: auto;
 }