diff --git a/packages/web/src/scss/components/Toast/_Toast.scss b/packages/web/src/scss/components/Toast/_Toast.scss
index b563899a55..46efbf3368 100644
--- a/packages/web/src/scss/components/Toast/_Toast.scss
+++ b/packages/web/src/scss/components/Toast/_Toast.scss
@@ -111,6 +111,72 @@
     align-items: var(--toast-alignment-x, center); // 2.a
 }
 
+// Stacking draft start
+
+$_queue-collapse-after: 3;
+$_queue-collapsed-visible-limit: 2; // Not to be changed, a different value would require CSS generation.
+
+.Toast__queue:has(.Toast__item) {
+    row-gap: 0; // Use margin instead of gap to avoid margin accumulation at the start of the queue.
+}
+
+.Toast__item {
+    display: grid;
+    align-content: var(--toast-alignment-y);
+    justify-content: var(--toast-alignment-x);
+    width: 100%;
+    max-height: 200px; // Whatever larger than the largest toast message. CAUTION, AFFECTS COLLAPSE ANIMATION!
+    transition: max-height 1.25s cubic-bezier(0.4, 0, 0.2, 1), margin 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+        visibility 0.75s ease-out, opacity 0.75s ease-out, scale 0.5s ease-out;
+}
+
+// Put gap between all visible and collapsed items
+.Toast__item:nth-last-child(-n + #{$_queue-collapse-after + $_queue-collapsed-visible-limit}):not(:last-child) {
+    margin-block: var(--toast-item-top-margin, 0) var(--toast-item-bottom-margin, 0);
+}
+
+.Toast--top,
+.Toast--tablet--top,
+.Toast--desktop--top {
+    --toast-item-bottom-margin: #{theme.$gap};
+}
+
+.Toast--bottom,
+.Toast--tablet--bottom,
+.Toast--desktop--bottom {
+    --toast-item-top-margin: #{theme.$gap};
+}
+
+// Visible items
+.Toast__item:nth-last-child(-n + #{$_queue-collapse-after}) {
+    z-index: 1;
+}
+
+// Collapsed items
+.Toast__item:nth-last-child(n + #{$_queue-collapse-after + 1}) {
+    max-height: 0;
+}
+
+// Collapsed items: first
+.Toast__item:nth-last-child(#{$_queue-collapse-after + $_queue-collapsed-visible-limit - 1}) {
+    scale: 0.95;
+}
+
+// Collapsed items: second
+.Toast__item:nth-last-child(#{$_queue-collapse-after + $_queue-collapsed-visible-limit}) {
+    opacity: 0.5;
+    scale: 0.9;
+}
+
+// Invisible items
+.Toast__item:nth-last-child(n + #{$_queue-collapse-after + $_queue-collapsed-visible-limit + 1}) {
+    visibility: hidden;
+    opacity: 0;
+    scale: 0.5;
+}
+
+// Stacking draft end
+
 @each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
     $infix: breakpoint.get-modifier('infix', $breakpoint-name, $breakpoint-value);
 
diff --git a/packages/web/src/scss/components/Toast/index.html b/packages/web/src/scss/components/Toast/index.html
index 3b70f4fd12..d1d37cadac 100644
--- a/packages/web/src/scss/components/Toast/index.html
+++ b/packages/web/src/scss/components/Toast/index.html
@@ -74,55 +74,175 @@ <h2 class="docs-Heading">Alignment</h2>
 
     <div id="toast-example" class="Toast Toast--bottom Toast--center" role="log">
       <div class="Toast__queue">
+        <div class="Toast__item">
+
+          <div id="my-dismissible-toast" class="ToastBar ToastBar--success ToastBar--dismissible">
+            <div class="ToastBar__content">
+              <svg width="20" height="20" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#check-plain" />
+              </svg>
+              <div class="ToastBar__message">
+                I was first!
+                <a href="#" class="link-inverted link-underlined">Action</a>
+              </div>
+            </div>
+            <button
+              type="button"
+              onclick="this.parentElement.parentElement.remove()"
+              class="Button Button--small Button--square Button--inverted"
+              data-spirit-dismiss="toast"
+              aria-controls="my-dismissible-toast"
+              aria-expanded="true"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </div>
 
-        <div id="my-dismissible-toast" class="ToastBar ToastBar--success ToastBar--dismissible">
-          <div class="ToastBar__content">
-            <svg width="20" height="20" aria-hidden="true">
-              <use xlink:href="/icons/svg/sprite.svg#check-plain" />
-            </svg>
-            <div class="ToastBar__message">
-              I was first!
-              <a href="#" class="link-inverted link-underlined">Action</a>
+        </div>
+        <div class="Toast__item">
+
+          <div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible">
+            <div class="ToastBar__content">
+              <svg width="20" height="20" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#info" />
+              </svg>
+              <div class="ToastBar__message">
+                I appeared later. This toast has a long message that wraps automatically.
+                <a href="#" class="link-inverted link-underlined">Action</a>
+              </div>
             </div>
+            <button
+              type="button"
+              onclick="this.parentElement.parentElement.remove()"
+              class="Button Button--small Button--square Button--inverted"
+              data-spirit-dismiss="toast"
+              aria-controls="my-other-dismissible-toast"
+              aria-expanded="true"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
           </div>
-          <button
-            type="button"
-            class="Button Button--small Button--square Button--inverted"
-            data-spirit-dismiss="toast"
-            aria-controls="my-dismissible-toast"
-            aria-expanded="true"
-          >
-            <svg width="24" height="24" aria-hidden="true">
-              <use xlink:href="/icons/svg/sprite.svg#close" />
-            </svg>
-            <span class="accessibility-hidden">Close</span>
-          </button>
+
         </div>
+        <div class="Toast__item">
+
+          <div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible">
+            <div class="ToastBar__content">
+              <svg width="20" height="20" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#info" />
+              </svg>
+              <div class="ToastBar__message">
+                I appeared later. This toast has a long message that wraps automatically.
+                <a href="#" class="link-inverted link-underlined">Action</a>
+              </div>
+            </div>
+            <button
+              type="button"
+              onclick="this.parentElement.parentElement.remove()"
+              class="Button Button--small Button--square Button--inverted"
+              data-spirit-dismiss="toast"
+              aria-controls="my-other-dismissible-toast"
+              aria-expanded="true"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </div>
 
-        <div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible">
-          <div class="ToastBar__content">
-            <svg width="20" height="20" aria-hidden="true">
-              <use xlink:href="/icons/svg/sprite.svg#info" />
-            </svg>
-            <div class="ToastBar__message">
-              I appeared later. This toast has a long message that wraps automatically.
-              <a href="#" class="link-inverted link-underlined">Action</a>
+        </div>
+        <div class="Toast__item">
+
+          <div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible">
+            <div class="ToastBar__content">
+              <svg width="20" height="20" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#info" />
+              </svg>
+              <div class="ToastBar__message">
+                I appeared later. This toast has a long message that wraps automatically.
+                <a href="#" class="link-inverted link-underlined">Action</a>
+              </div>
             </div>
+            <button
+              type="button"
+              onclick="this.parentElement.parentElement.remove()"
+              class="Button Button--small Button--square Button--inverted"
+              data-spirit-dismiss="toast"
+              aria-controls="my-other-dismissible-toast"
+              aria-expanded="true"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
           </div>
-          <button
-            type="button"
-            class="Button Button--small Button--square Button--inverted"
-            data-spirit-dismiss="toast"
-            aria-controls="my-other-dismissible-toast"
-            aria-expanded="true"
-          >
-            <svg width="24" height="24" aria-hidden="true">
-              <use xlink:href="/icons/svg/sprite.svg#close" />
-            </svg>
-            <span class="accessibility-hidden">Close</span>
-          </button>
+
         </div>
+        <div class="Toast__item">
+
+          <div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible">
+            <div class="ToastBar__content">
+              <svg width="20" height="20" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#info" />
+              </svg>
+              <div class="ToastBar__message">
+                I appeared later. This toast has a long message that wraps automatically.
+                <a href="#" class="link-inverted link-underlined">Action</a>
+              </div>
+            </div>
+            <button
+              type="button"
+              onclick="this.parentElement.parentElement.remove()"
+              class="Button Button--small Button--square Button--inverted"
+              data-spirit-dismiss="toast"
+              aria-controls="my-other-dismissible-toast"
+              aria-expanded="true"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </div>
 
+        </div>
+        <div class="Toast__item">
+
+          <div id="my-other-dismissible-toast" class="ToastBar ToastBar--warning ToastBar--dismissible">
+            <div class="ToastBar__content">
+              <svg width="20" height="20" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#info" />
+              </svg>
+              <div class="ToastBar__message">
+                Last one!
+                I appeared later. This toast has a long message that wraps automatically.
+                <a href="#" class="link-inverted link-underlined">Action</a>
+              </div>
+            </div>
+            <button
+              type="button"
+              onclick="this.parentElement.parentElement.remove()"
+              class="Button Button--small Button--square Button--inverted"
+              data-spirit-dismiss="toast"
+              aria-controls="my-other-dismissible-toast"
+              aria-expanded="true"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </div>
+
+        </div>
       </div>
     </div>