{# Each item: <li class="ui-notif" data-unread data-urgent><span class="ui-notif-dot" aria-hidden="true"></span><div class="ui-notif-body"><div class="ui-notif-head"><a class="ui-notif-title" href="…">Title</a> badge <span class="ui-sr-only">Unread</span></div><p class="ui-notif-preview">One line</p></div><span class="ui-notif-time" title="full date">2m</span></li> #}
<.notification_list>
<li class="ui-notif" data-unread data-urgent><span class="ui-notif-dot" aria-hidden="true"></span><div class="ui-notif-body"><div class="ui-notif-head"><a class="ui-notif-title" href="#">Payment failed for Northwind Ltd</a><.badge variant="destructive">Urgent</.badge><span class="ui-sr-only">Unread</span></div><p class="ui-notif-preview">The card on file was declined twice. Their workspace will be suspended on 12 October unless the payment method is updated.</p></div><span class="ui-notif-time" title="12 October 2026, 10:40">2m</span></li>
<li class="ui-notif" data-unread><span class="ui-notif-dot" aria-hidden="true"></span><div class="ui-notif-body"><div class="ui-notif-head"><a class="ui-notif-title" href="#">Grace Hopper assigned you a review</a><.badge variant="outline">Review</.badge><span class="ui-sr-only">Unread</span></div><p class="ui-notif-preview">Invoice template changes for the October billing run.</p></div><span class="ui-notif-time" title="12 October 2026, 09:42">1h</span></li>
<li class="ui-notif"><span class="ui-notif-dot" aria-hidden="true"></span><div class="ui-notif-body"><div class="ui-notif-head"><a class="ui-notif-title" href="#">Export ready: Q3 activity report</a></div><p class="ui-notif-preview">Your CSV export finished and is available for 7 days.</p></div><span class="ui-notif-time" title="11 October 2026, 16:05">Yesterday</span></li>
</.notification_list>