Sync styleguide 2026.05.18.1

2026-08-04 13:03:44 +02:00
parent 095da274cb
commit 04d6bd876b
10 changed files with 181 additions and 5 deletions
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Pattern E-Mail Double-Opt-in-Bestätigung</title>
+  <link rel="stylesheet" href="../styleguide.css">
+  <link rel="stylesheet" href="../email-styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Pattern – E-Mail Double-Opt-in-Bestätigung</h1>
+
+  <section id="pattern-email-double-opt-in-bestaetigung">
+    <p class="sg-preview-label">Pattern: E-Mail Double-Opt-in-Bestätigung</p>
+
+    <div class="sg-preview-area">
+      <div class="sg-email-preview-viewport">
+        <div class="sg-email-preview-body">
+          <header
+            class="sg-email-header"
+            aria-label="E-Mail Header"
+            data-component="email-header"
+            data-component-variant="logo-only"
+            data-derived-from="portal-header-without-options-row"
+          >
+            <div class="sg-email-header__main" data-component-part="main">
+              <p class="sg-email-header__brand" data-component-part="brand">ValueStockFinder</p>
+            </div>
+          </header>
+
+          <article
+            class="sg-transparent-card sg-page-layout-app__heading-block"
+            aria-label="E-Mail Inhalt"
+            data-pattern="email-double-opt-in-bestaetigung"
+            data-email-subject="Bitte bestätige deine Anmeldung"
+            data-email-preheader="Bestätige deine E-Mail-Adresse, um Updates von ValueStockFinder zu erhalten."
+          >
+            <h1 class="sg-heading-h1 sg-text-on-dark">Fast geschafft</h1>
+
+            <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>
+              </div>
+
+              <div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
+                <p class="sg-body">Bitte bestätige jetzt deine E-Mail-Adresse. Erst danach dürfen wir dir die gewünschten Informationen per E-Mail senden.</p>
+                <p class="sg-body">Falls du dich nicht selbst angemeldet hast, musst du nichts weiter tun.</p>
+              </div>
+
+              <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-email-card-action-segment" data-component-part="card-action">
+                <button class="sg-interaction-element sg-button sg-button--process" type="button" data-component="button" data-component-variant="process" data-component-state="active">
+                  Anmeldung bestätigen
+                </button>
+              </div>
+            </article>
+          </article>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</body>
+</html>