Add content wrapper card to public cards page

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>

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%;