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

Add notification object card pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-29 12:58:04 +02:00
parent 85f80a0e0f
commit d7f2d08a3f
5 changed files with 49 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/object-card.html
+18
View File
@@ -159,6 +159,24 @@
</div>
</article>
</div>
<h2 class="sg-sub-heading sg-section-h2">Notification</h2>
<p class="sg-preview-label">Pattern: Notification</p>
<p class="sg-body">Hinweis: Diese Variante basiert auf Object Card Content Basic, ist auf 50% Breite ausgelegt und nutzt hellgelbe Untersegmente.</p>
<article class="sg-card sg-object-card sg-object-card--content-basic sg-object-card--notification" data-pattern="object-card-notification" aria-label="Notification Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-object-card__header" data-pattern-part="object-card-notification-header">
<div class="sg-strong">Benachrichtigung</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-notification-content">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Donec vitae sapien ut libero venenatis faucibus.</p>
</div>
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-notification-actions">
<div class="sg-object-card__actions sg-notification-card__actions">
<button class="sg-interaction-element sg-button sg-button--active" type="button">Verstanden</button>
</div>
</footer>
</article>
</section>
<script>