diff --git a/docs/styleguide/patterns/public-page-patterns.html b/docs/styleguide/patterns/public-page-patterns.html index 69ff1d2..e694aa6 100644 --- a/docs/styleguide/patterns/public-page-patterns.html +++ b/docs/styleguide/patterns/public-page-patterns.html @@ -152,6 +152,26 @@ +

pattern: CTA box left full width

+ +
+
+
+
+

+ Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten. +

+ +
+ +
+
+
+
+
+

pattern: CTA box right

@@ -192,6 +212,26 @@
+

pattern: CTA small button box right full width

+ +
+
+
+
+

+ Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten. +

+ +
+ +
+
+
+
+
+

Pattern: Newsletter Form

diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html index 9ebe0e4..ac17736 100644 --- a/docs/styleguide/semantic-tokens-components.html +++ b/docs/styleguide/semantic-tokens-components.html @@ -122,7 +122,7 @@ surface-call-to-action-cardsurface-card-groupFläche der Call-to-action-Card als dunkle Content-Card-Variante. text-call-to-action-cardcolor-font-lightTextfarbe in der Call-to-action-Card. - layout-call-to-action-card-widthcalc(var(--dimension-public-content-width) * 0.5); dimension-public-content-width in der Drei-Spalten-VarianteBreite der Card im Page-Layout; die Drei-Spalten-Variante nutzt die volle Content-Breite. + layout-call-to-action-card-widthcalc(var(--dimension-public-content-width) * 0.5); dimension-public-content-width in der Fullwidth- und Drei-Spalten-VarianteBreite der Card im Page-Layout; die Fullwidth- und Drei-Spalten-Varianten nutzen die volle Content-Breite. layout-call-to-action-card-content-columnsminmax(0, 1fr) max-content; minmax(0, 1fr) 30% max-content in der Drei-Spalten-VarianteZweispaltiges Standardlayout oder dreispaltiges Layout mit flexibler Textspalte, 30% Formularfeldspalte und Inhaltsbreite der Aktion; auf kleinen Viewports einspaltig. layout-call-to-action-card-content-gapspacing-largeAbstand zwischen Text und Button. diff --git a/docs/styleguide/styles/44-components-public-page-components.css b/docs/styleguide/styles/44-components-public-page-components.css index 6b180df..01feb1d 100644 --- a/docs/styleguide/styles/44-components-public-page-components.css +++ b/docs/styleguide/styles/44-components-public-page-components.css @@ -53,6 +53,10 @@ --layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content; } +.sg-card--call-to-action-card--full-width { + --layout-call-to-action-card-width: var(--dimension-public-content-width); +} + .sg-card--call-to-action-card .sg-card-segment--body { display: grid; grid-template-columns: var(--layout-call-to-action-card-content-columns); diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 2facc19..fbb6767 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -4687,6 +4687,10 @@ main { --layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content; } +.sg-card--call-to-action-card--full-width { + --layout-call-to-action-card-width: var(--dimension-public-content-width); +} + .sg-card--call-to-action-card .sg-card-segment--body { display: grid; grid-template-columns: var(--layout-call-to-action-card-content-columns); diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index df3286e..f5b3f3c 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": "7c3b8b7", - "syncedAtUtc": "2026-08-05T14:24:01Z", + "styleguideCommit": "6a9b3b1", + "syncedAtUtc": "2026-08-07T10:56:44Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 2facc19..fbb6767 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -4687,6 +4687,10 @@ main { --layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content; } +.sg-card--call-to-action-card--full-width { + --layout-call-to-action-card-width: var(--dimension-public-content-width); +} + .sg-card--call-to-action-card .sg-card-segment--body { display: grid; grid-template-columns: var(--layout-call-to-action-card-content-columns);