From f5662ca1eda68e54e8d6501bf2a496f8ea00949b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 11:11:24 +0200
Subject: [PATCH] Add spacing-large margin after both group card component
 variants

---
 components/cards.html          | 4 ++--
 styles/40-components-cards.css | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/cards.html b/components/cards.html
index be2a31c..eaea0b4 100644
--- a/components/cards.html
+++ b/components/cards.html
@@ -139,7 +139,7 @@
   <section id="component-group-card">
     <p class="sg-preview-label">Component: Group Card</p>
 
-    <div class="sg-group-card" data-component="group-card">
+    <div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
 
       <article class="sg-card" data-component="card" data-component-context="group-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
@@ -169,7 +169,7 @@
 
     <p class="sg-preview-label">Variante: Group Card mit H2 Überschrift</p>
 
-    <div class="sg-group-card" data-component="group-card">
+    <div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
       <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Gruppenüberschrift</h2>
 
       <article class="sg-card" data-component="card" data-component-context="group-card">
diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css
index ead2dbc..573b380 100644
--- a/styles/40-components-cards.css
+++ b/styles/40-components-cards.css
@@ -167,6 +167,10 @@
   width: calc(50% - var(--spacing-small));
 }
 
+.sg-group-card--margin-after-large {
+  margin-bottom: var(--spacing-large);
+}
+
 .sg-group-card__heading {
   flex: 0 0 100%;
   margin-top: 0;