Use two-column footer content

patterns/page-layout-public.html

@@ -44,17 +44,27 @@
         </p>
       </div>
 
-      <div class="sg-content-cards-group sg-page-layout-public__footer-group" data-pattern="content-cards-group" aria-label="Fusszeile">
+      <article class="sg-group-card sg-page-layout-public__footer-group" data-component="group-card" aria-label="Fusszeile">
-        <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fusszeile">
+        <div class="sg-group-card__header-row">
-          <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+          <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Fusszeile</h2>
-            <div class="sg-strong">Fusszeile</div>
+        </div>
+
+        <div class="sg-group-card__body">
+          <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
+            <div class="sg-text-layout-pattern__preview-surface">
+              <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
+                <p class="sg-body sg-text-layout-pattern__column">
+                  Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im zweispaltigen Layout.
+                </p>
+                <p class="sg-body sg-text-layout-pattern__column">
+                  Footer rechts: Platzhaltertext fuer ergaenzende Angaben, rechtliche Hinweise oder sekundäre Footer-Inhalte im gleichen Raster.
+                </p>
+              </div>
+            </div>
           </div>
-          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
-            <p class="sg-body">Platzhalterinhalt fuer die Fusszeile.</p>
         </div>
       </article>
     </div>
-    </div>
   </main>
 
   <script src="../scripts/help-icon-overlays.js"></script>