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

Family

notification

Tier

enhanced

Kind

component

Extends

notification/base

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.