From 33b1479e27fc95a1765e31296662820df9e7e467 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Sun, 9 Aug 2026 08:23:19 +0200 Subject: [PATCH] Update general email template pattern --- email-styleguide.css | 53 +++++++++++++++++ index.html | 21 +++++++ patterns/general-email-template.html | 88 ++++++++++++++++++++++++++++ 3 files changed, 162 insertions(+) create mode 100644 email-styleguide.css create mode 100644 patterns/general-email-template.html diff --git a/email-styleguide.css b/email-styleguide.css new file mode 100644 index 0000000..b9f816c --- /dev/null +++ b/email-styleguide.css @@ -0,0 +1,53 @@ +@import "./styles/01-foundations.css"; + +/* E-Mail-Komponenten: separater Einstiegspunkt, nicht Teil des Portal-CSS */ +.sg-email-preview-viewport { + width: var(--dimension-email-body-max-width); + background: var(--surface-object-card-lower-segment); +} + +.sg-email-preview-body { + width: 100%; +} + +.sg-email-header { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + padding: + var(--card-segment-padding-vertical) + var(--layout-page-content-inset-inline); + border: var(--border-none); + border-radius: var(--radius-card); + box-shadow: var(--shadow-none); + background: var(--surface-portal-header); +} + +.sg-email-header__main { + width: 100%; +} + +.sg-email-header__brand { + margin: 0; + color: var(--text-portal-header-brand); + font-size: var(--font-size-portal-header-brand); +} + +.sg-email-card, +.sg-email-footer-card { + width: calc(100% + (2 * var(--card-segment-padding-horizontal))); + margin-inline: calc(-1 * var(--card-segment-padding-horizontal)); +} + +.sg-email-card .sg-card-segment--body > .sg-body { + color: var(--text-card-body); +} + +.sg-email-card-action-segment { + align-items: flex-end; +} + +.sg-email-template > .sg-heading-h1 { + color: var(--text-card-body); +} diff --git a/index.html b/index.html index 8813f9e..52395f7 100644 --- a/index.html +++ b/index.html @@ -83,6 +83,27 @@ +
+

E-Mail-Templates

+ +

Foundations

+ + +

Komponenten

+ + +

Patterns

+ + +

Valuestockfinder Templates

+ +
+ diff --git a/patterns/general-email-template.html b/patterns/general-email-template.html new file mode 100644 index 0000000..72c20e4 --- /dev/null +++ b/patterns/general-email-template.html @@ -0,0 +1,88 @@ + + + + + + Styleguide – General E-Mail-Template + + + + + +

General E-Mail-Template

+ +
+

General E-Mail-Template

+ +
+
+
+
+
+

ValueStockFinder

+
+
+ +
+

Fast geschafft

+ +
+
+
Bitte bestätige deine Anmeldung
+
+ +
+

Bitte bestätige jetzt deine E-Mail-Adresse. Erst danach dürfen wir dir die gewünschten Informationen per E-Mail senden.

+

Falls du dich nicht selbst angemeldet hast, musst du nichts weiter tun.

+
+ +
+ +
+
+ + +
+
+
+
+
+ + +