gitea_admin/Styleguide
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add stacked user notification pattern

Browse Source
This commit is contained in:
gitea_admin committed 2026-08-19 14:08:22 +02:00
1 parent 0f1e478dbc
commit 1d65a565c5
4 files changed
+82
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

patterns/notifications.html
+42
View File
@@ -213,6 +213,48 @@
</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>