From 85f80a0e0f11a21c39b15130a0cc9a262c7802e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sat, 27 Jun 2026 07:52:31 +0200
Subject: [PATCH] Show notification variant labels in UI

---
 patterns/notifications.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/patterns/notifications.html b/patterns/notifications.html
index 6732e90..9477d43 100644
--- a/patterns/notifications.html
+++ b/patterns/notifications.html
@@ -79,6 +79,7 @@
 
     <div class="sg-preview-area sg-notifications-pattern">
 
+      <p class="sg-preview-label">Pattern: Notification with title - reg</p>
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="reg" data-component="notification-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">
@@ -99,6 +100,7 @@
         </div>
       </article>
 
+      <p class="sg-preview-label">Pattern: Notification with title - green</p>
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="green" data-component="notification-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">
@@ -119,6 +121,7 @@
         </div>
       </article>
 
+      <p class="sg-preview-label">Pattern: Notification with title - light green</p>
       <article class="sg-card sg-card--notification-signal-green-light sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="light-green" data-component="notification-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-light sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">
@@ -139,6 +142,7 @@
         </div>
       </article>
 
+      <p class="sg-preview-label">Pattern: Notification with title - yellow</p>
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="yellow" 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">
@@ -159,6 +163,7 @@
         </div>
       </article>
 
+      <p class="sg-preview-label">Pattern: Notification with title - white</p>
       <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="white" data-component="notification-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">