diff --git a/docs/styleguide/patterns/public-page-patterns.html b/docs/styleguide/patterns/public-page-patterns.html index e694aa6..ef39cc0 100644 --- a/docs/styleguide/patterns/public-page-patterns.html +++ b/docs/styleguide/patterns/public-page-patterns.html @@ -152,11 +152,11 @@ -

pattern: CTA box left full width

+

pattern: CTA box left wide right

-
+

Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten. @@ -212,11 +212,11 @@

-

pattern: CTA small button box right full width

+

pattern: CTA small button box right wide

-
+

Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten. diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html index ac17736..1f4629d 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 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-widthcalc(var(--dimension-public-content-width) * 0.5); calc(var(--dimension-public-content-width) * 0.7) in der Wide-Variante; dimension-public-content-width in der Drei-Spalten-VarianteBreite der Card im Page-Layout; die Wide-Variante nutzt 70 % der Content-Breite und ist rechtsbündig ausgerichtet, die Drei-Spalten-Variante nutzt 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 01feb1d..e3a5420 100644 --- a/docs/styleguide/styles/44-components-public-page-components.css +++ b/docs/styleguide/styles/44-components-public-page-components.css @@ -53,8 +53,9 @@ --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--wide { + --layout-call-to-action-card-width: calc(var(--dimension-public-content-width) * 0.7); + margin-left: auto; } .sg-card--call-to-action-card .sg-card-segment--body { @@ -116,6 +117,10 @@ --layout-call-to-action-card-content-columns: minmax(0, 1fr); } + .sg-card--call-to-action-card--wide { + width: 100%; + } + .sg-card--call-to-action-card--three-column .sg-call-to-action-card__action { justify-content: flex-end; } diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index fbb6767..94f3c7e 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -4687,8 +4687,9 @@ 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--wide { + --layout-call-to-action-card-width: calc(var(--dimension-public-content-width) * 0.7); + margin-left: auto; } .sg-card--call-to-action-card .sg-card-segment--body { @@ -4750,6 +4751,10 @@ main { --layout-call-to-action-card-content-columns: minmax(0, 1fr); } + .sg-card--call-to-action-card--wide { + width: 100%; + } + .sg-card--call-to-action-card--three-column .sg-call-to-action-card__action { justify-content: flex-end; } diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index f5b3f3c..7a4e250 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": "6a9b3b1", - "syncedAtUtc": "2026-08-07T10:56:44Z", + "styleguideCommit": "580ded6", + "syncedAtUtc": "2026-08-07T11:05:35Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index fbb6767..94f3c7e 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -4687,8 +4687,9 @@ 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--wide { + --layout-call-to-action-card-width: calc(var(--dimension-public-content-width) * 0.7); + margin-left: auto; } .sg-card--call-to-action-card .sg-card-segment--body { @@ -4750,6 +4751,10 @@ main { --layout-call-to-action-card-content-columns: minmax(0, 1fr); } + .sg-card--call-to-action-card--wide { + width: 100%; + } + .sg-card--call-to-action-card--three-column .sg-call-to-action-card__action { justify-content: flex-end; }