From 547fe0cc1ff89db87edb9d352e1537029fe80024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 24 Jun 2026 10:08:38 +0200
Subject: [PATCH] Add right CTA box pattern

---
 patterns/public-page-patterns.html          | 20 ++++++++++++++++++++
 styles/45-patterns-public-page-patterns.css |  4 ++++
 2 files changed, 24 insertions(+)

diff --git a/patterns/public-page-patterns.html b/patterns/public-page-patterns.html
index 25ff961..92908e1 100644
--- a/patterns/public-page-patterns.html
+++ b/patterns/public-page-patterns.html
@@ -54,6 +54,26 @@
         </article>
       </div>
     </div>
+
+    <p class="sg-preview-label">pattern: CTA box right</p>
+
+    <div class="sg-preview-area">
+      <div class="sg-content-group-box" data-component="content-group-box">
+        <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
+          <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
+            <p class="sg-body sg-call-to-action-card__text">
+              Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
+            </p>
+
+            <div class="sg-call-to-action-card__action">
+              <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
+                Call-to-action-Button
+              </button>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
   </section>
 
 </body>
diff --git a/styles/45-patterns-public-page-patterns.css b/styles/45-patterns-public-page-patterns.css
index 51379b3..4030e8c 100644
--- a/styles/45-patterns-public-page-patterns.css
+++ b/styles/45-patterns-public-page-patterns.css
@@ -11,3 +11,7 @@
 .sg-page-public-page-patterns .sg-text-block--align-right {
   margin-left: auto;
 }
+
+.sg-page-public-page-patterns .sg-call-to-action-card--align-right {
+  margin-left: auto;
+}