diff --git a/components/cards-public-page.html b/components/cards-public-page.html index 2d12560..a6a559f 100644 --- a/components/cards-public-page.html +++ b/components/cards-public-page.html @@ -20,6 +20,34 @@

Content Wrapper Card als Transparent Card ohne horizontale Außenabstände und mit vertikalem Abstand gemäss spacing-large.

+ +
+

Component: CTA Right

+ +
+
+
+
+

+ Ein Satz Text als CTA-Hinweis. +

+
+ +
+
+ + + +
+
+
+
+
+
diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css index 1dbc1a9..db75097 100644 --- a/styles/40-components-cards.css +++ b/styles/40-components-cards.css @@ -236,6 +236,34 @@ margin: var(--spacing-large) 0; } +.sg-page-cards-public-page .sg-cards-public-page__cta-right-card { + width: 60%; + max-width: none; + margin-inline-start: auto; +} + +.sg-page-cards-public-page .sg-cards-public-page__cta-right-body { + display: flex; + align-items: center; +} + +.sg-page-cards-public-page .sg-cards-public-page__cta-right-grid { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); +} + +.sg-page-cards-public-page .sg-cards-public-page__cta-right-copy { + flex: 1 1 auto; + min-width: 0; +} + +.sg-page-cards-public-page .sg-cards-public-page__cta-right-buttons { + flex: 0 0 auto; +} + .sg-page-cards .sg-group-card > .sg-card { flex: 0 0 100%; width: 100%;