diff --git a/patterns/public-page-patterns.html b/patterns/public-page-patterns.html
index bcc573d..8981443 100644
--- a/patterns/public-page-patterns.html
+++ b/patterns/public-page-patterns.html
@@ -40,17 +40,20 @@
 
       <div class="sg-preview-area">
         <div class="sg-content-group-box" data-component="content-group-box">
-          <p class="sg-preview-label">Pattern: Text zweispaltig (mobil gestacked)</p>
-          <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig-gestacked" aria-label="Text Layout zweispaltig mobil gestacked">
-            <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column sg-text-layout-pattern__two-column--stacked-mobile" data-pattern-part="text-block-two-column-stacked-mobile">
-              <p class="sg-body sg-text-layout-pattern__column">
-                Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
-              </p>
-              <p class="sg-body sg-text-layout-pattern__column">
-                Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
-              </p>
+          <article class="sg-card" data-component="basic-card">
+            <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
+              <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig-gestacked" aria-label="Text Layout zweispaltig mobil gestacked">
+                <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column sg-text-layout-pattern__two-column--stacked-mobile" data-pattern-part="text-block-two-column-stacked-mobile">
+                  <p class="sg-body sg-text-layout-pattern__column">
+                    Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
+                  </p>
+                  <p class="sg-body sg-text-layout-pattern__column">
+                    Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
+                  </p>
+                </div>
+              </div>
             </div>
-          </div>
+          </article>
         </div>
       </div>