diff --git a/docs/styleguide/patterns/public-page-patterns.html b/docs/styleguide/patterns/public-page-patterns.html
index 7a2ed2e..95a910a 100644
--- a/docs/styleguide/patterns/public-page-patterns.html
+++ b/docs/styleguide/patterns/public-page-patterns.html
@@ -192,7 +192,30 @@
-
diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html
index d6def3c..4e4c0be 100644
--- a/docs/styleguide/semantic-tokens-patterns.html
+++ b/docs/styleguide/semantic-tokens-patterns.html
@@ -21,6 +21,7 @@
| layout-public-page-pattern-text-picture-columns | repeat(2, minmax(0, 1fr)) | Spaltenraster des Patterns Pattern: text and picture right mit zwei gleich breiten Spalten. |
| layout-public-page-pattern-text-picture-gap | spacing-large | Spaltenabstand zwischen Text und Bild im Pattern Pattern: text and picture right. |
| text-public-page-pattern-text-picture | color-font-light | Textfarbe des Patterns Pattern: text and picture right. |
+ | layout-public-page-pattern-call-to-action-box-width | calc(var(--dimension-public-content-width) * 0.5) | Breite der dunklen Public Call to Action Box im Public-Page-Pattern-Kontext. |
diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css
index 99f1f59..6decf84 100644
--- a/docs/styleguide/styles/01-foundations.css
+++ b/docs/styleguide/styles/01-foundations.css
@@ -195,6 +195,7 @@
--surface-content-block-card-content: var(--color-white);
--radius-picture-full-width: var(--radius-card);
--layout-content-cards-group-gap: var(--spacing-small);
+ --layout-public-page-pattern-call-to-action-box-width: calc(var(--dimension-public-content-width) * 0.5);
--layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
--layout-page-layout-public-2-column-gap: var(--spacing-large);
--surface-card-list-drawer: var(--color-background-purple);
diff --git a/docs/styleguide/styles/45-patterns-public-page-patterns.css b/docs/styleguide/styles/45-patterns-public-page-patterns.css
index 5c28f91..c14b45e 100644
--- a/docs/styleguide/styles/45-patterns-public-page-patterns.css
+++ b/docs/styleguide/styles/45-patterns-public-page-patterns.css
@@ -8,6 +8,20 @@
width: 100%;
}
+.sg-public-page-pattern-call-to-action-box {
+ width: var(--layout-public-page-pattern-call-to-action-box-width);
+ max-width: 100%;
+ margin-inline: auto;
+}
+
+.sg-public-page-pattern-call-to-action-box__action {
+ display: flex;
+}
+
+.sg-public-page-pattern-call-to-action-box__action .sg-button--cta {
+ width: 100%;
+}
+
.sg-public-page-pattern-text-and-picture-right {
--layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
--layout-public-page-pattern-text-picture-gap: var(--spacing-large);
@@ -132,4 +146,8 @@
.sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
width: 100%;
}
+
+ .sg-public-page-pattern-call-to-action-box {
+ width: 100%;
+ }
}
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index c4b6da1..418e99d 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -195,6 +195,7 @@
--surface-content-block-card-content: var(--color-white);
--radius-picture-full-width: var(--radius-card);
--layout-content-cards-group-gap: var(--spacing-small);
+ --layout-public-page-pattern-call-to-action-box-width: calc(var(--dimension-public-content-width) * 0.5);
--layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
--layout-page-layout-public-2-column-gap: var(--spacing-large);
--surface-card-list-drawer: var(--color-background-purple);
@@ -4682,6 +4683,20 @@ main {
width: 100%;
}
+.sg-public-page-pattern-call-to-action-box {
+ width: var(--layout-public-page-pattern-call-to-action-box-width);
+ max-width: 100%;
+ margin-inline: auto;
+}
+
+.sg-public-page-pattern-call-to-action-box__action {
+ display: flex;
+}
+
+.sg-public-page-pattern-call-to-action-box__action .sg-button--cta {
+ width: 100%;
+}
+
.sg-public-page-pattern-text-and-picture-right {
--layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
--layout-public-page-pattern-text-picture-gap: var(--spacing-large);
@@ -4806,5 +4821,9 @@ main {
.sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
width: 100%;
}
+
+ .sg-public-page-pattern-call-to-action-box {
+ width: 100%;
+ }
}
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 19f65c9..5806439 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
{
"styleguideVersion": "2026.05.18.1",
- "styleguideCommit": "2cb6214",
- "syncedAtUtc": "2026-06-25T07:33:41Z",
+ "styleguideCommit": "ef47af4",
+ "syncedAtUtc": "2026-06-26T13:07:25Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
diff --git a/public/assets/styles.css b/public/assets/styles.css
index c4b6da1..418e99d 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -195,6 +195,7 @@
--surface-content-block-card-content: var(--color-white);
--radius-picture-full-width: var(--radius-card);
--layout-content-cards-group-gap: var(--spacing-small);
+ --layout-public-page-pattern-call-to-action-box-width: calc(var(--dimension-public-content-width) * 0.5);
--layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
--layout-page-layout-public-2-column-gap: var(--spacing-large);
--surface-card-list-drawer: var(--color-background-purple);
@@ -4682,6 +4683,20 @@ main {
width: 100%;
}
+.sg-public-page-pattern-call-to-action-box {
+ width: var(--layout-public-page-pattern-call-to-action-box-width);
+ max-width: 100%;
+ margin-inline: auto;
+}
+
+.sg-public-page-pattern-call-to-action-box__action {
+ display: flex;
+}
+
+.sg-public-page-pattern-call-to-action-box__action .sg-button--cta {
+ width: 100%;
+}
+
.sg-public-page-pattern-text-and-picture-right {
--layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
--layout-public-page-pattern-text-picture-gap: var(--spacing-large);
@@ -4806,5 +4821,9 @@ main {
.sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
width: 100%;
}
+
+ .sg-public-page-pattern-call-to-action-box {
+ width: 100%;
+ }
}