notification toast stacked multi status stacked notifications toast info warning error stacked notification list multiple toast notifications
Notification Stacked
Fetch pattern JSON:
curl https://webspire.de/patterns/notification/stacked.json stacked.html
<div class="ws-notification mx-auto flex max-w-sm flex-col gap-3">
<!-- Info notification -->
<div class="rounded-xl border border-[var(--ws-notification-border)] bg-[var(--ws-notification-bg)] p-4 shadow-lg">
<div class="flex items-start gap-3">
<div class="flex-shrink-0 rounded-full bg-blue-100 p-2 text-blue-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/></svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-[var(--ws-notification-text)]">System Update</p>
<p class="mt-1 text-sm text-[var(--ws-notification-text-soft)]">Scheduled maintenance tonight at 11 PM UTC.</p>
</div>
<button type="button" class="flex-shrink-0 rounded-lg p-1 text-[var(--ws-notification-text-soft)] transition hover:text-[var(--ws-notification-text)]" aria-label="Dismiss info notification">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
</div>
<!-- Warning notification -->
<div class="rounded-xl border border-amber-200 bg-amber-50 p-4 shadow-lg">
<div class="flex items-start gap-3">
<div class="flex-shrink-0 rounded-full bg-amber-100 p-2 text-amber-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-[var(--ws-notification-text)]">Storage Warning</p>
<p class="mt-1 text-sm text-[var(--ws-notification-text-soft)]">You've used 90% of your storage quota.</p>
</div>
<button type="button" class="flex-shrink-0 rounded-lg p-1 text-[var(--ws-notification-text-soft)] transition hover:text-[var(--ws-notification-text)]" aria-label="Dismiss warning notification">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
</div>
<!-- Error notification -->
<div class="rounded-xl border border-red-200 bg-red-50 p-4 shadow-lg">
<div class="flex items-start gap-3">
<div class="flex-shrink-0 rounded-full bg-red-100 p-2 text-red-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-[var(--ws-notification-text)]">Payment Failed</p>
<p class="mt-1 text-sm text-[var(--ws-notification-text-soft)]">Your last payment could not be processed. Please update your billing info.</p>
</div>
<button type="button" class="flex-shrink-0 rounded-lg p-1 text-[var(--ws-notification-text-soft)] transition hover:text-[var(--ws-notification-text)]" aria-label="Dismiss error notification">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
notificationtoaststackedmultistatus
Slots
| Name | Required | Description |
|---|---|---|
| notifications | Yes | List of notification items. |
Stacked variant showing three notifications (info, warning, error) in a vertical list. Demonstrates how multiple toasts compose together in a notification center or toast container.