Show notification variant labels in UI

This commit is contained in:
2026-06-27 07:52:31 +02:00
parent f658cfd738
commit 85f80a0e0f
+5
View File
@@ -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">