From 23ba259638cb8f922f4d53ca0325d66db83f1979 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 18 May 2026 16:13:56 +0200
Subject: [PATCH] Split object group card actions into dedicated bottom segment

---
 patterns/object-group-card.html | 49 +++++++++++++++++++++++++++++----
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/patterns/object-group-card.html b/patterns/object-group-card.html
index d889f7b..f49b0d7 100644
--- a/patterns/object-group-card.html
+++ b/patterns/object-group-card.html
@@ -18,8 +18,10 @@
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
           <div class="sg-strong">Alcon Inc.</div>
           </header>
-        <footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions">
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
           <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
+        </div>
+        <footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
           <div class="sg-object-card__actions sg-object-group-card__actions">
             <button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
           </div>
@@ -28,27 +30,62 @@
 
       <article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
-        <footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions sg-object-group-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button></div></footer>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
+        </div>
+        <footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
+          <div class="sg-object-card__actions sg-object-group-card__actions">
+            <button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
+          </div>
+        </footer>
       </article>
 
       <article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
-        <footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions sg-object-group-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button></div></footer>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
+        </div>
+        <footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
+          <div class="sg-object-card__actions sg-object-group-card__actions">
+            <button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
+          </div>
+        </footer>
       </article>
 
       <article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
-        <footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions sg-object-group-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button></div></footer>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
+        </div>
+        <footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
+          <div class="sg-object-card__actions sg-object-group-card__actions">
+            <button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
+          </div>
+        </footer>
       </article>
 
       <article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
-        <footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions sg-object-group-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button></div></footer>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
+        </div>
+        <footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
+          <div class="sg-object-card__actions sg-object-group-card__actions">
+            <button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
+          </div>
+        </footer>
       </article>
 
       <article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Objekt Group Card">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"><div class="sg-strong">Alcon Inc.</div></header>
-        <footer class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-actions"><p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p><div class="sg-object-card__actions sg-object-group-card__actions"><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button></div></footer>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-group-card-content">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
+        </div>
+        <footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-group-card-actions">
+          <div class="sg-object-card__actions sg-object-group-card__actions">
+            <button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Zur Gruppe</button>
+          </div>
+        </footer>
       </article>
     </div>
   </section>