Set notifications pattern desktop size to company card bounds

This commit is contained in:
2026-06-01 16:31:10 +02:00
parent 89d899e694
commit 7624ace59f
3 changed files with 22 additions and 4 deletions
+4 -4
View File
@@ -13,9 +13,9 @@
<section id="pattern-notifications">
<p class="sg-preview-label">Pattern: Notifications</p>
<div class="sg-preview-area">
<div class="sg-preview-area sg-notifications-pattern">
<article class="sg-card" data-pattern="notification" data-component="notification-card">
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" 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.
@@ -29,7 +29,7 @@
</div>
</article>
<article class="sg-card" data-pattern="notification" data-component="notification-card">
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" 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.
@@ -43,7 +43,7 @@
</div>
</article>
<article class="sg-card sg-card--notification-white" data-pattern="notification" data-component="notification-card">
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" 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.