From fc88afc4b3513fd0d13c9b139e49cd1a99246d5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 23 Jun 2026 17:15:23 +0200
Subject: [PATCH] Add content wrapper card to public cards page

---
 components/cards-public-page.html | 13 +++++++++++++
 styles/40-components-cards.css    |  4 ++++
 2 files changed, 17 insertions(+)

diff --git a/components/cards-public-page.html b/components/cards-public-page.html
index 0938415..2d12560 100644
--- a/components/cards-public-page.html
+++ b/components/cards-public-page.html
@@ -11,6 +11,19 @@
   <h1 class="sg-main-heading">Components – Cards Public Page</h1>
 
   <main aria-label="Cards Public Page">
+
+    <section id="component-content-wrapper-card">
+      <p class="sg-preview-label">Component: Content Wrapper Card</p>
+
+      <div class="sg-preview-area">
+        <div class="sg-transparent-card" data-component="transparent-card">
+          <p class="sg-body">
+            Content Wrapper Card als Transparent Card ohne horizontale Außenabstände und mit vertikalem Abstand gemäss spacing-large.
+          </p>
+        </div>
+      </div>
+    </section>
+
   </main>
 
 </body>
diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css
index bc02601..1dbc1a9 100644
--- a/styles/40-components-cards.css
+++ b/styles/40-components-cards.css
@@ -232,6 +232,10 @@
   max-width: none;
 }
 
+.sg-page-cards-public-page .sg-preview-area > .sg-transparent-card {
+  margin: var(--spacing-large) 0;
+}
+
 .sg-page-cards .sg-group-card > .sg-card {
   flex: 0 0 100%;
   width: 100%;