Sync styleguide 2026.05.18.1

docs/styleguide/patterns/notifications.html

@@ -187,6 +187,74 @@
     </div>
   </section>
 
+  <section id="pattern-user-notification">
+    <p class="sg-preview-label">Pattern: User Notification</p>
+
+    <div class="sg-preview-area sg-user-notification-pattern">
+      <article class="sg-card sg-notifications-pattern__card" data-pattern="user-notification" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
+          <p class="sg-body">
+            <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
+          </p>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-pattern__actions" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+            Bestätigen
+          </button>
+        </div>
+      </article>
+    </div>
+  </section>
+
+  <section id="pattern-user-notification-staple">
+    <p class="sg-preview-label">Pattern: User Notification Staple</p>
+
+    <div class="sg-preview-area sg-user-notification-staple">
+      <article class="sg-card" data-pattern="user-notification-staple" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
+          <p class="sg-body"><span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span></p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie.</p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
+        </div>
+      </article>
+
+      <article class="sg-card" data-pattern="user-notification-staple" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
+          <p class="sg-body"><span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span></p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie.</p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
+        </div>
+      </article>
+
+      <article class="sg-card" data-pattern="user-notification-staple" data-component="notification-card">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
+          <p class="sg-body"><span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span></p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie.</p>
+        </div>
+        <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow sg-user-notification-staple__actions" data-component-part="card-body">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Bestätigen</button>
+        </div>
+      </article>
+    </div>
+  </section>
+
   <section id="pattern-notifications-small">
     <p class="sg-preview-label">Pattern: Notifications small</p>