diff --git a/patterns/notifications.html b/patterns/notifications.html
index e158952..6732e90 100644
--- a/patterns/notifications.html
+++ b/patterns/notifications.html
@@ -79,7 +79,7 @@
 
     <div class="sg-preview-area sg-notifications-pattern">
 
-      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title-reg" data-component="notification-card">
+      <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">
             <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
@@ -99,7 +99,7 @@
         </div>
       </article>
 
-      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title-green" data-component="notification-card">
+      <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">
             <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
@@ -119,7 +119,7 @@
         </div>
       </article>
 
-      <article class="sg-card sg-card--notification-signal-green-light sg-notifications-pattern__card" data-pattern="notification-with-title-light-green" data-component="notification-card">
+      <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">
             <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
@@ -139,7 +139,7 @@
         </div>
       </article>
 
-      <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title-yellow" data-component="notification-card">
+      <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">
             <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
@@ -159,7 +159,7 @@
         </div>
       </article>
 
-      <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title-white" data-component="notification-card">
+      <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">
             <span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>