notification inbox updates alerts panel notification inbox updates alerts panel list inbox style notifications panel product updates list
Notification Inbox Panel
Fetch pattern JSON:
curl https://webspire.de/patterns/notification/inbox-panel.json inbox-panel.html
<section class="ws-notification-inbox-panel" style="--ws-panel-bg: var(--ws-color-surface); --ws-panel-text: var(--ws-color-text); --ws-panel-text-soft: var(--ws-color-text-soft); --ws-panel-border: var(--ws-color-border); --ws-panel-accent: var(--ws-color-primary);">
<div class="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
<div class="overflow-hidden rounded-2xl border border-[var(--ws-panel-border)] bg-[var(--ws-panel-bg)] shadow-sm">
<div class="flex items-center justify-between border-b border-[var(--ws-panel-border)] px-6 py-4">
<div>
<h2 class="text-lg font-semibold text-[var(--ws-panel-text)]">Notifications</h2>
<p class="mt-1 text-sm text-[var(--ws-panel-text-soft)]">A denser inbox-style surface for product updates and account events.</p>
</div>
<button type="button" class="text-sm font-medium text-[var(--ws-panel-accent)]">Mark all read</button>
</div>
<ul class="divide-y divide-[var(--ws-panel-border)]">
<li class="flex gap-4 bg-[var(--ws-panel-accent)]/5 px-6 py-4">
<div class="mt-1 h-2.5 w-2.5 rounded-full bg-[var(--ws-panel-accent)]"></div>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<p class="font-medium text-[var(--ws-panel-text)]">Quarterly billing report is ready</p>
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">New</span>
</div>
<p class="mt-1 text-sm text-[var(--ws-panel-text-soft)]">Export the March summary or share it directly with finance.</p>
</div>
<p class="whitespace-nowrap text-sm text-[var(--ws-panel-text-soft)]">5 min</p>
</li>
<li class="flex gap-4 px-6 py-4">
<div class="mt-1 h-2.5 w-2.5 rounded-full bg-emerald-500"></div>
<div class="min-w-0 flex-1">
<p class="font-medium text-[var(--ws-panel-text)]">Maya approved the new onboarding copy</p>
<p class="mt-1 text-sm text-[var(--ws-panel-text-soft)]">The changes are live in the workspace preview.</p>
</div>
<p class="whitespace-nowrap text-sm text-[var(--ws-panel-text-soft)]">1 h</p>
</li>
<li class="flex gap-4 px-6 py-4">
<div class="mt-1 h-2.5 w-2.5 rounded-full bg-amber-500"></div>
<div class="min-w-0 flex-1">
<p class="font-medium text-[var(--ws-panel-text)]">Storage usage reached 82%</p>
<p class="mt-1 text-sm text-[var(--ws-panel-text-soft)]">Review uploads from the asset library before the next billing cycle.</p>
</div>
<p class="whitespace-nowrap text-sm text-[var(--ws-panel-text-soft)]">Yesterday</p>
</li>
</ul>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
notificationinboxupdatesalertspanel
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Panel title and top-level action. |
| list | Yes | Dense notification rows with state marker and timestamp. |
Notification surface for denser product UIs. Useful when alerts should behave like an inbox or activity center rather than floating toasts.