Sync styleguide 2026.05.18.1

This commit is contained in:
2026-08-12 11:14:26 +02:00
parent 16f9bae7ce
commit 94b4fed0d6
7 changed files with 66 additions and 4 deletions
+17
View File
@@ -118,6 +118,23 @@
</article>
</div>
<p class="sg-preview-label">Variante: Green Content Card</p>
<div class="sg-preview-area">
<article class="sg-card sg-card--content-card sg-card--content-card-green" data-component="content-card" aria-label="Green Content Card">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
<p class="sg-body sg-text-layout-pattern__column">
Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im zweispaltigen Layout.
</p>
<p class="sg-body sg-text-layout-pattern__column">
Footer rechts: Platzhaltertext fuer ergaenzende Angaben, rechtliche Hinweise oder sekundaere Footer-Inhalte im gleichen Raster.
</p>
</div>
</div>
</article>
</div>
<p class="sg-preview-label">Variante: Footer Card</p>
<div class="sg-preview-area">
+4
View File
@@ -53,6 +53,10 @@
margin-top: calc(var(--spacing-large) * 2);
}
.sg-email-footer-card .sg-body {
font-size: var(--font-size-small);
}
.sg-email-card .sg-card-segment--body > .sg-body {
color: var(--text-card-body);
}
@@ -38,7 +38,6 @@
>
<h1 class="sg-heading-h1">Fast geschafft</h1>
<p class="sg-body sg-email-template__intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Integer nec odio. Praesent libero.<br>Sed cursus ante dapibus diam.</p>
<article class="sg-card sg-email-card" data-component="card" data-pattern-part="confirmation-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Bitte bestätige deine Anmeldung</div>
@@ -57,7 +56,7 @@
</article>
<article
class="sg-card sg-card--content-card sg-card--content-card-dark sg-email-footer-card"
class="sg-card sg-card--content-card sg-card--footer-card sg-email-footer-card"
data-component="content-card"
data-component-context="email-footer"
data-component-variant="not-subscribed"
@@ -38,6 +38,20 @@
color: var(--color-font-light);
}
.sg-card.sg-card--content-card-green {
--surface-content-card-green: var(--color-signal-green);
--surface-card: var(--surface-content-card-green);
--surface-card-body: var(--surface-content-card-green);
--text-card-header: var(--color-font-light);
--text-card-body: var(--color-font-light);
}
.sg-card.sg-card--content-card-green .sg-card-segment--body,
.sg-card.sg-card--content-card-green .sg-text-layout-pattern__column,
.sg-card.sg-card--content-card-green .sg-body {
color: var(--text-card-body);
}
.sg-card.sg-card--footer-card {
--surface-card: var(--color-black);
--surface-card-body: var(--color-black);
+14
View File
@@ -3889,6 +3889,20 @@ main {
color: var(--color-font-light);
}
.sg-card.sg-card--content-card-green {
--surface-content-card-green: var(--color-signal-green);
--surface-card: var(--surface-content-card-green);
--surface-card-body: var(--surface-content-card-green);
--text-card-header: var(--color-font-light);
--text-card-body: var(--color-font-light);
}
.sg-card.sg-card--content-card-green .sg-card-segment--body,
.sg-card.sg-card--content-card-green .sg-text-layout-pattern__column,
.sg-card.sg-card--content-card-green .sg-body {
color: var(--text-card-body);
}
.sg-card.sg-card--footer-card {
--surface-card: var(--color-black);
--surface-card-body: var(--color-black);
+2 -2
View File
@@ -1,7 +1,7 @@
{
"styleguideVersion": "2026.05.18.1",
"styleguideCommit": "6e6d49f",
"syncedAtUtc": "2026-08-09T06:39:36Z",
"styleguideCommit": "9d5f683",
"syncedAtUtc": "2026-08-12T09:14:26Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
+14
View File
@@ -3889,6 +3889,20 @@ main {
color: var(--color-font-light);
}
.sg-card.sg-card--content-card-green {
--surface-content-card-green: var(--color-signal-green);
--surface-card: var(--surface-content-card-green);
--surface-card-body: var(--surface-content-card-green);
--text-card-header: var(--color-font-light);
--text-card-body: var(--color-font-light);
}
.sg-card.sg-card--content-card-green .sg-card-segment--body,
.sg-card.sg-card--content-card-green .sg-text-layout-pattern__column,
.sg-card.sg-card--content-card-green .sg-body {
color: var(--text-card-body);
}
.sg-card.sg-card--footer-card {
--surface-card: var(--color-black);
--surface-card-body: var(--color-black);