diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html
index 2680a93e64..9b40c6f055 100644
--- a/packages/web/src/scss/components/Modal/index.html
+++ b/packages/web/src/scss/components/Modal/index.html
@@ -4,674 +4,686 @@
 
   <h2 class="docs-Heading">Modal</h2>
 
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_basic"
-    aria-controls="example_basic"
-    aria-expanded="false"
-  >
-    Open Modal
-  </button>
-
-  <!-- Modal: start -->
-  <dialog id="example_basic" class="Modal" aria-labelledby="example_basic_title">
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog ModalDialog--expandOnMobile">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_basic_title" class="ModalHeader__title">Modal Title</h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_basic"
-          aria-controls="example_basic"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-          provident unde. Eveniet, iste, molestiae?
-        </p>
-        <!-- Footer alignment demo: start -->
-        <script>
-          const setFooterAlignment = (event) => {
-            const footerElement = document.querySelector('#example_basic .ModalFooter');
-
-            footerElement.classList.remove('ModalFooter--left', 'ModalFooter--center', 'ModalFooter--right');
-            footerElement.classList.add(`ModalFooter--${event.target.value}`);
-          };
-
-          const toggleExpandOnMobile = () => {
-            document.querySelector('#example_basic .ModalDialog').classList.toggle('ModalDialog--expandOnMobile');
-          }
-        </script>
-        <form onchange="setFooterAlignment(event)" class="d-none d-tablet-block">
-          <div>Footer alignment (from tablet up):</div>
-          <label for="footer_alignment_left" class="Radio mr-600">
-            <input type="radio" id="footer_alignment_left" name="footer_alignment" value="left" class="Radio__input" autocomplete="off" />
-            <span class="Radio__label">Left</span>
-          </label>
-          <label for="footer_alignment_center" class="Radio mr-600">
-            <input type="radio" id="footer_alignment_center" name="footer_alignment" value="center" class="Radio__input" autocomplete="off" />
-            <span class="Radio__label">Center</span>
-          </label>
-          <label for="footer_alignment_right" class="Radio mr-600">
-            <input type="radio" id="footer_alignment_right" name="footer_alignment" value="right" class="Radio__input" autocomplete="off" checked />
-            <span class="Radio__label">Right</span>
-          </label>
-        </form>
-        <form class="d-tablet-none">
-          <label for="expand_on_mobile" class="Checkbox">
-            <input type="checkbox" id="expand_on_mobile" class="Checkbox__input" onchange="toggleExpandOnMobile()" autocomplete="off" checked />
-            <span class="Checkbox__text">
-                <span class="Checkbox__label">Expand on mobile</span>
-              </span>
-          </label>
-        </form>
-        <!-- Footer alignment demo: end -->
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__description">
-          Optional description
-        </div>
-        <div class="ModalFooter__actions">
-          <button
-            type="button"
-            class="Button Button--primary Button--medium"
-            data-spirit-dismiss="modal"
-            data-spirit-target="#example_basic"
-          >
-            Primary action
-          </button>
+  <div class="docs-Stack docs-Stack--start">
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_basic"
+      aria-controls="example_basic"
+      aria-expanded="false"
+    >
+      Open Modal
+    </button>
+
+    <!-- Modal: start -->
+    <dialog id="example_basic" class="Modal" aria-labelledby="example_basic_title">
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog ModalDialog--expandOnMobile">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_basic_title" class="ModalHeader__title">Modal Title</h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_basic"
+            aria-controls="example_basic"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <!-- Footer alignment demo: start -->
+          <script>
+            const setFooterAlignment = (event) => {
+              const footerElement = document.querySelector('#example_basic .ModalFooter');
+
+              footerElement.classList.remove('ModalFooter--left', 'ModalFooter--center', 'ModalFooter--right');
+              footerElement.classList.add(`ModalFooter--${event.target.value}`);
+            };
+
+            const toggleExpandOnMobile = () => {
+              document.querySelector('#example_basic .ModalDialog').classList.toggle('ModalDialog--expandOnMobile');
+            }
+          </script>
+          <form onchange="setFooterAlignment(event)" class="d-none d-tablet-block">
+            <div>Footer alignment (from tablet up):</div>
+            <label for="footer_alignment_left" class="Radio mr-600">
+              <input type="radio" id="footer_alignment_left" name="footer_alignment" value="left" class="Radio__input" autocomplete="off" />
+              <span class="Radio__label">Left</span>
+            </label>
+            <label for="footer_alignment_center" class="Radio mr-600">
+              <input type="radio" id="footer_alignment_center" name="footer_alignment" value="center" class="Radio__input" autocomplete="off" />
+              <span class="Radio__label">Center</span>
+            </label>
+            <label for="footer_alignment_right" class="Radio mr-600">
+              <input type="radio" id="footer_alignment_right" name="footer_alignment" value="right" class="Radio__input" autocomplete="off" checked />
+              <span class="Radio__label">Right</span>
+            </label>
+          </form>
+          <form class="d-tablet-none">
+            <label for="expand_on_mobile" class="Checkbox">
+              <input type="checkbox" id="expand_on_mobile" class="Checkbox__input" onchange="toggleExpandOnMobile()" autocomplete="off" checked />
+              <span class="Checkbox__text">
+                  <span class="Checkbox__label">Expand on mobile</span>
+                </span>
+            </label>
+          </form>
+          <!-- Footer alignment demo: end -->
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
-
-    </article>
-    <!-- ModalDialog: end -->
-
-  </dialog>
-  <!-- Modal: end -->
-
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_form"
-    aria-controls="example_form"
-    aria-expanded="false"
-  >
-    Open Modal with a Form
-  </button>
-
-  <!-- Modal: start -->
-  <dialog id="example_form" class="Modal" aria-labelledby="example_form_title">
-
-    <!-- ModalDialog: start -->
-    <form class="ModalDialog" method="dialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_form_title" class="ModalHeader__title">Modal with a Form</h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_form"
-          aria-controls="example_form"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <div class="TextField mb-400">
-          <label for="textfield" class="TextField__label">Label</label>
-          <input type="text" id="textfield" class="TextField__input" placeholder="TextField" />
-        </div>
-        <p>
-          The primary action is a button with <code>type="submit"</code> and closes the dialog on submission.
-        </p>
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
-          <button type="submit" class="Button Button--primary Button--medium">
-            Primary action
-          </button>
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__description">
+            Optional description
+          </div>
+          <div class="ModalFooter__actions">
+            <button
+              type="button"
+              class="Button Button--primary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_basic"
+            >
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_basic"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </article>
+      <!-- ModalDialog: end -->
+
+    </dialog>
+    <!-- Modal: end -->
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_form"
+      aria-controls="example_form"
+      aria-expanded="false"
+    >
+      Open Modal with a Form
+    </button>
+
+    <!-- Modal: start -->
+    <dialog id="example_form" class="Modal" aria-labelledby="example_form_title">
+
+      <!-- ModalDialog: start -->
+      <form class="ModalDialog" method="dialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_form_title" class="ModalHeader__title">Modal with a Form</h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_form"
+            aria-controls="example_form"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <div class="TextField mb-400">
+            <label for="textfield" class="TextField__label">Label</label>
+            <input type="text" id="textfield" class="TextField__input" placeholder="TextField" />
+          </div>
+          <p>
+            The primary action is a button with <code>type="submit"</code> and closes the dialog on submission.
+          </p>
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
-
-    </form>
-    <!-- ModalDialog: end -->
-
-  </dialog>
-  <!-- Modal: end -->
-
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_custom_height"
-    aria-controls="example_custom_height"
-    aria-expanded="false"
-  >
-    Open Modal with Custom Height
-  </button>
-
-  <!-- Modal: start -->
-  <dialog
-    id="example_custom_height"
-    class="Modal"
-    aria-labelledby="example_custom_height_title"
-    style="--modal-preferred-height-mobile: 400px; --modal-preferred-height-tablet: 500px; --modal-max-height-tablet: 700px"
-  >
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_custom_height_title" class="ModalHeader__title">Modal with Custom Height</h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_custom_height"
-          aria-controls="example_custom_height"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <p class="d-tablet-none">
-          This modal has a custom height of <code>400px</code> set via the <code>--modal-preferred-height-mobile</code> CSS
-          custom property.
-          <br /><br />
-          The max height cannot be customized on mobile though.
-        </p>
-        <p class="d-none d-tablet-block">
-          This modal has a custom height of <code>500px</code> set via the <code>--modal-preferred-height-tablet</code> CSS
-          custom property.
-          <br /><br />
-          The max height of this modal is <code>700px</code> set via the <code>--modal-max-height-tablet</code> CSS custom
-          property.
-        </p>
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
-          <button
-            type="button"
-            class="Button Button--primary Button--medium"
-            data-spirit-dismiss="modal"
-            data-spirit-target="#example_custom_height"
-          >
-            Primary action
-          </button>
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button type="submit" class="Button Button--primary Button--medium">
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_form"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </form>
+      <!-- ModalDialog: end -->
+
+    </dialog>
+    <!-- Modal: end -->
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_custom_height"
+      aria-controls="example_custom_height"
+      aria-expanded="false"
+    >
+      Open Modal with Custom Height
+    </button>
+
+    <!-- Modal: start -->
+    <dialog
+      id="example_custom_height"
+      class="Modal"
+      aria-labelledby="example_custom_height_title"
+      style="--modal-preferred-height-mobile: 400px; --modal-preferred-height-tablet: 500px; --modal-max-height-tablet: 700px"
+    >
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_custom_height_title" class="ModalHeader__title">Modal with Custom Height</h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_custom_height"
+            aria-controls="example_custom_height"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <p class="d-tablet-none">
+            This modal has a custom height of <code>400px</code> set via the <code>--modal-preferred-height-mobile</code> CSS
+            custom property.
+            <br /><br />
+            The max height cannot be customized on mobile though.
+          </p>
+          <p class="d-none d-tablet-block">
+            This modal has a custom height of <code>500px</code> set via the <code>--modal-preferred-height-tablet</code> CSS
+            custom property.
+            <br /><br />
+            The max height of this modal is <code>700px</code> set via the <code>--modal-max-height-tablet</code> CSS custom
+            property.
+          </p>
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button
+              type="button"
+              class="Button Button--primary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_custom_height"
+            >
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_custom_height"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
 
-    </article>
-    <!-- ModalDialog: end -->
+      </article>
+      <!-- ModalDialog: end -->
 
-  </dialog>
-  <!-- Modal: end -->
+    </dialog>
+    <!-- Modal: end -->
+
+  </div>
 
 </section>
 <section class="docs-Section">
   <h2 class="docs-Heading">Scrolling Long Content</h2>
 
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_long_content"
-    aria-controls="example_long_content"
-    aria-expanded="false"
-  >
-    Open Modal with Long Content
-  </button>
-
-  <!-- Modal: start -->
-  <dialog id="example_long_content" class="Modal" aria-labelledby="example_long_content_title">
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_long_content_title" class="ModalHeader__title">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia perferendis reprehenderit, voluptate. Cum delectus dicta
-        </h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_long_content"
-          aria-controls="example_long_content"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-          provident unde. Eveniet, iste, molestiae?
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-          provident unde. Eveniet, iste, molestiae?
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-          provident unde. Eveniet, iste, molestiae?
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-          provident unde. Eveniet, iste, molestiae?
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-          provident unde. Eveniet, iste, molestiae?
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-          provident unde. Eveniet, iste, molestiae?
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-          provident unde. Eveniet, iste, molestiae?
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-          provident unde. Eveniet, iste, molestiae?
-        </p>
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
-          <button
-            type="button"
-            class="Button Button--primary Button--medium"
-            data-spirit-dismiss="modal"
-            data-spirit-target="#example_long_content"
-          >
-            Primary action
-          </button>
+  <div class="docs-Stack docs-Stack--start">
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_long_content"
+      aria-controls="example_long_content"
+      aria-expanded="false"
+    >
+      Open Modal with Long Content
+    </button>
+
+    <!-- Modal: start -->
+    <dialog id="example_long_content" class="Modal" aria-labelledby="example_long_content_title">
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_long_content_title" class="ModalHeader__title">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia perferendis reprehenderit, voluptate. Cum delectus dicta
+          </h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_long_content"
+            aria-controls="example_long_content"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
-
-    </article>
-    <!-- ModalDialog: end -->
-
-  </dialog>
-  <!-- Modal: end -->
-
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_scroll_view"
-    aria-controls="example_scroll_view"
-    aria-expanded="false"
-  >
-    Open Modal with ScrollView
-  </button>
-
-  <!-- Modal: start -->
-  <dialog id="example_scroll_view" class="Modal" aria-labelledby="example_scroll_view_title">
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_scroll_view_title" class="ModalHeader__title">
-          Modal with ScrollView
-        </h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_scroll_view"
-          aria-controls="example_scroll_view"
-          aria-expanded="false"
-        >
-          <svg class="Icon" width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ScrollView: start -->
-      <div class="ScrollView ScrollView--vertical" data-spirit-toggle="scrollView">
-        <div class="ScrollView__viewport" data-spirit-element="viewport">
-          <div class="ScrollView__content" data-spirit-element="content">
-
-            <!-- ModalBody: start -->
-            <div class="ModalBody">
-              <!-- Content: start -->
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-                perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-                provident unde. Eveniet, iste, molestiae?
-              </p>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-                perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-                provident unde. Eveniet, iste, molestiae?
-              </p>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-                perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-                provident unde. Eveniet, iste, molestiae?
-              </p>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-                perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-                provident unde. Eveniet, iste, molestiae?
-              </p>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-                perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-                provident unde. Eveniet, iste, molestiae?
-              </p>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-                perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-                provident unde. Eveniet, iste, molestiae?
-              </p>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-                perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-                provident unde. Eveniet, iste, molestiae?
-              </p>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-                perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-                provident unde. Eveniet, iste, molestiae?
-              </p>
-              <!-- Content: end -->
-            </div>
-            <!-- ModalBody: end -->
-
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button
+              type="button"
+              class="Button Button--primary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_long_content"
+            >
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_long_content"
+            >
+              Secondary action
+            </button>
           </div>
-        </div>
-        <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true"></div>
-      </div>
-      <!-- ScrollView: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
-          <button
-            type="button"
-            class="Button Button--primary Button--medium"
-            data-spirit-dismiss="modal"
-            data-spirit-target="#example_scroll_view"
-          >
-            Primary action
-          </button>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </article>
+      <!-- ModalDialog: end -->
+
+    </dialog>
+    <!-- Modal: end -->
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_scroll_view"
+      aria-controls="example_scroll_view"
+      aria-expanded="false"
+    >
+      Open Modal with ScrollView
+    </button>
+
+    <!-- Modal: start -->
+    <dialog id="example_scroll_view" class="Modal" aria-labelledby="example_scroll_view_title">
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_scroll_view_title" class="ModalHeader__title">
+            Modal with ScrollView
+          </h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_scroll_view"
+            aria-controls="example_scroll_view"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg class="Icon" width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ScrollView: start -->
+        <div class="ScrollView ScrollView--vertical" data-spirit-toggle="scrollView">
+          <div class="ScrollView__viewport" data-spirit-element="viewport">
+            <div class="ScrollView__content" data-spirit-element="content">
+
+              <!-- ModalBody: start -->
+              <div class="ModalBody">
+                <!-- Content: start -->
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                  perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                  provident unde. Eveniet, iste, molestiae?
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                  perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                  provident unde. Eveniet, iste, molestiae?
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                  perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                  provident unde. Eveniet, iste, molestiae?
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                  perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                  provident unde. Eveniet, iste, molestiae?
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                  perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                  provident unde. Eveniet, iste, molestiae?
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                  perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                  provident unde. Eveniet, iste, molestiae?
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                  perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                  provident unde. Eveniet, iste, molestiae?
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                  perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                  provident unde. Eveniet, iste, molestiae?
+                </p>
+                <!-- Content: end -->
+              </div>
+              <!-- ModalBody: end -->
+
+            </div>
+          </div>
+          <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true"></div>
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
+        <!-- ScrollView: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button
+              type="button"
+              class="Button Button--primary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_scroll_view"
+            >
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_scroll_view"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
 
-    </article>
-    <!-- ModalDialog: end -->
+      </article>
+      <!-- ModalDialog: end -->
 
-  </dialog>
-  <!-- Modal: end -->
+    </dialog>
+    <!-- Modal: end -->
+  
+  </div>
 
 </section>
 
 <section class="docs-Section">
   <h2 class="docs-Heading">Stacking Modals</h2>
 
-  <button
-    type="button"
-    class="Button Button--primary Button--medium"
-    data-spirit-toggle="modal"
-    data-spirit-target="#example_stacking_parent"
-    aria-controls="example_stacking_parent"
-    aria-expanded="false"
-  >
-    Open Modal
-  </button>
-
-  <!-- Modal: start -->
-  <dialog id="example_stacking_parent" class="Modal" aria-labelledby="example_stacking_parent_title">
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_stacking_parent_title" class="ModalHeader__title">Modal Title</h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_stacking_parent"
-          aria-controls="example_stacking_parent"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-          provident unde. Eveniet, iste, molestiae?
-        </p>
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
+  <div class="docs-Stack docs-Stack--start">
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example_stacking_parent"
+      aria-controls="example_stacking_parent"
+      aria-expanded="false"
+    >
+      Open Modal
+    </button>
+
+    <!-- Modal: start -->
+    <dialog id="example_stacking_parent" class="Modal" aria-labelledby="example_stacking_parent_title">
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_stacking_parent_title" class="ModalHeader__title">Modal Title</h2>
           <button
             type="button"
-            class="Button Button--primary Button--medium"
-            data-spirit-toggle="modal"
-            data-spirit-target="#example_stacking_nested"
-            aria-controls="example_stacking_nested"
+            class="Button Button--tertiary Button--square Button--medium"
+            data-spirit-dismiss="modal"
+            data-spirit-target="#example_stacking_parent"
+            aria-controls="example_stacking_parent"
             aria-expanded="false"
           >
-            Open stacked dialog
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
-
-    </article>
-    <!-- ModalDialog: end -->
-
-  </dialog>
-  <!-- Modal: end -->
-  <!-- Modal: start -->
-  <dialog id="example_stacking_nested" class="Modal" aria-labelledby="example_stacking_nested_title">
-
-    <!-- ModalDialog: start -->
-    <article class="ModalDialog">
-
-      <!-- ModalHeader: start -->
-      <header class="ModalHeader">
-        <h2 id="example_stacking_nested_title" class="ModalHeader__title">Stacked Modal Title</h2>
-        <button
-          type="button"
-          class="Button Button--tertiary Button--square Button--medium"
-          data-spirit-dismiss="modal"
-          data-spirit-target="#example_stacking_nested"
-          aria-controls="example_stacking_nested"
-          aria-expanded="false"
-        >
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/icons/svg/sprite.svg#close" />
-          </svg>
-          <span class="accessibility-hidden">Close</span>
-        </button>
-      </header>
-      <!-- ModalHeader: end -->
-
-      <!-- ModalBody: start -->
-      <div class="ModalBody">
-        <!-- Content: start -->
-        <p>
-          Dolor quis metus a lorem, et elit pulvinar ligula condimentum non congue rhoncus molestie, at sem
-          viverra maximus nunc. Posuere pretium accumsan, pharetra vel integer sit amet volutpat neque fringilla,
-          non mauris erat id augue libero. Porta non congue, et iaculis et vehicula convallis non purus placerat
-          cursus, rhoncus laoreet nec et elit. Proin luctus, bibendum adipiscing ut ollicitudin vehicula nisi
-          nunc et, sollicitudin eget tristique nec commodo. Porttitor ligula, tellus vehicula arcu vestibulum
-          sed rutrum placerat, dui quis facilisis eget. Suscipit molestie, nibh maximus enim vestibulum aenean
-          ut libero sed imperdiet, curabitur et elit venenatis posuere.
-          <br />
-          Sapien vitae, dui sollicitudin nullam dolor quis nec nulla sapien, diam a ollicitudin non nulla nisl.
-          Quis orci porta, ac nec sapien ornare imperdiet a vel convallis, adipiscing ullamcorper lectus quis
-          pharetra. At nullam rutrum, nisl eget sit amet pulvinar ultricies nec porta, diam a sem odio a mauris
-          eu. Suscipit sodales, fusce ante cursus convallis dui vel dolor potenti nulla fusce gravida.
-        </p>
-        <!-- Content: end -->
-      </div>
-      <!-- ModalBody: end -->
-
-      <!-- ModalFooter: start -->
-      <footer class="ModalFooter ModalFooter--right">
-        <div class="ModalFooter__actions">
-          <button type="submit" class="Button Button--primary Button--medium">
-            Primary action
-          </button>
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button
+              type="button"
+              class="Button Button--primary Button--medium"
+              data-spirit-toggle="modal"
+              data-spirit-target="#example_stacking_nested"
+              aria-controls="example_stacking_nested"
+              aria-expanded="false"
+            >
+              Open stacked dialog
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </article>
+      <!-- ModalDialog: end -->
+
+    </dialog>
+    <!-- Modal: end -->
+    <!-- Modal: start -->
+    <dialog id="example_stacking_nested" class="Modal" aria-labelledby="example_stacking_nested_title">
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example_stacking_nested_title" class="ModalHeader__title">Stacked Modal Title</h2>
           <button
             type="button"
-            class="Button Button--secondary Button--medium"
+            class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example_stacking_nested"
+            aria-controls="example_stacking_nested"
+            aria-expanded="false"
           >
-            Secondary action
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
           </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <p>
+            Dolor quis metus a lorem, et elit pulvinar ligula condimentum non congue rhoncus molestie, at sem
+            viverra maximus nunc. Posuere pretium accumsan, pharetra vel integer sit amet volutpat neque fringilla,
+            non mauris erat id augue libero. Porta non congue, et iaculis et vehicula convallis non purus placerat
+            cursus, rhoncus laoreet nec et elit. Proin luctus, bibendum adipiscing ut ollicitudin vehicula nisi
+            nunc et, sollicitudin eget tristique nec commodo. Porttitor ligula, tellus vehicula arcu vestibulum
+            sed rutrum placerat, dui quis facilisis eget. Suscipit molestie, nibh maximus enim vestibulum aenean
+            ut libero sed imperdiet, curabitur et elit venenatis posuere.
+            <br />
+            Sapien vitae, dui sollicitudin nullam dolor quis nec nulla sapien, diam a ollicitudin non nulla nisl.
+            Quis orci porta, ac nec sapien ornare imperdiet a vel convallis, adipiscing ullamcorper lectus quis
+            pharetra. At nullam rutrum, nisl eget sit amet pulvinar ultricies nec porta, diam a sem odio a mauris
+            eu. Suscipit sodales, fusce ante cursus convallis dui vel dolor potenti nulla fusce gravida.
+          </p>
+          <!-- Content: end -->
         </div>
-      </footer>
-      <!-- ModalFooter: end -->
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button type="submit" class="Button Button--primary Button--medium">
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example_stacking_nested"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </article>
+      <!-- ModalDialog: end -->
 
-    </article>
-    <!-- ModalDialog: end -->
+    </dialog>
+    <!-- Modal: end -->
 
-  </dialog>
-  <!-- Modal: end -->
+  </div>
 
 </section>