Add call to action card component

components/public-page-components.html

@@ -30,5 +30,25 @@
     </div>
   </section>
 
+  <section id="component-call-to-action-card">
+    <p class="sg-preview-label">Component: Call to action Card</p>
+
+    <div class="sg-preview-area">
+      <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card" 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>
+  </section>
+
 </body>
 </html>

semantic-tokens-components.html

@@ -107,6 +107,18 @@
         <tr><td>layout-text-block-width</td><td>dimension-public-content-width</td><td>Breite des Textblocks im Viewport.</td></tr>
       </tbody>
     </table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Call to action Card</h3>
+    <table class="sg-foundation-table sg-table-label">
+      <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
+      <tbody>
+        <tr><td>surface-call-to-action-card</td><td>surface-card-group</td><td>Fläche der Call-to-action-Card als dunkle Content-Card-Variante.</td></tr>
+        <tr><td>text-call-to-action-card</td><td>color-font-light</td><td>Textfarbe in der Call-to-action-Card.</td></tr>
+        <tr><td>layout-call-to-action-card-width</td><td>dimension-public-content-width</td><td>Breite der Card im Page-Layout.</td></tr>
+        <tr><td>layout-call-to-action-card-content-columns</td><td>minmax(0, 1fr) max-content</td><td>Zweispaltiges Layout mit flexibler Textspalte und Buttonspalte in Buttonbreite.</td></tr>
+        <tr><td>layout-call-to-action-card-content-gap</td><td>spacing-large</td><td>Abstand zwischen Text und Button.</td></tr>
+      </tbody>
+    </table>
   </section>
 
   <section id="semantic-interactive">

styles/44-components-public-page-components.css

@@ -36,6 +36,37 @@
   color: var(--text-text-block);
 }
 
+.sg-card--call-to-action-card {
+  --surface-call-to-action-card: var(--surface-card-group);
+  --text-call-to-action-card: var(--color-font-light);
+  --layout-call-to-action-card-width: var(--dimension-public-content-width);
+  --layout-call-to-action-card-content-columns: minmax(0, 1fr) max-content;
+  --layout-call-to-action-card-content-gap: var(--spacing-large);
+  width: var(--layout-call-to-action-card-width);
+  max-width: 100%;
+}
+
+.sg-card--call-to-action-card .sg-card-segment--body {
+  display: grid;
+  grid-template-columns: var(--layout-call-to-action-card-content-columns);
+  gap: var(--layout-call-to-action-card-content-gap);
+  align-items: center;
+  background: var(--surface-call-to-action-card);
+  color: var(--text-call-to-action-card);
+}
+
+.sg-call-to-action-card__text {
+  margin: 0;
+  min-width: 0;
+  color: var(--text-call-to-action-card);
+}
+
+.sg-call-to-action-card__action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .sg-page-public-page-components .sg-preview-area {
   display: flex;
   flex-direction: column;