DST-494: replace related content with teaser list

docs/content/patterns/loading-states/loading-states.mdx

@@ -81,11 +81,12 @@ Full-section indicators are displayed over large sections of content or the enti
 #### For loading times under 10 seconds
 
 At this stage:
-* Disable any actions that must be disabled for successful processing. (Ignore actions underneath the full-section indicator, as these will be inaccessible regardless.)
-* The XLoader animation appears within an overlay (created via a dialog) over the container of the loading content.
-    * If the context requires additional information, add a label. Use labels sparingly, like at the start or end of important tasks or at particularly confusing junctions.
-* If the button used to start the process is visible and located outside the container of the loading content, ensure it follows the process for inline indicators as well.
-* The mouse cursor style changes to progress.
+
+- Disable any actions that must be disabled for successful processing. (Ignore actions underneath the full-section indicator, as these will be inaccessible regardless.)
+- The XLoader animation appears within an overlay (created via a dialog) over the container of the loading content.
+  - If the context requires additional information, add a label. Use labels sparingly, like at the start or end of important tasks or at particularly confusing junctions.
+- If the button used to start the process is visible and located outside the container of the loading content, ensure it follows the process for inline indicators as well.
+- The mouse cursor style changes to progress.
 
 These effects last for a minimum of 1 second regardless of process duration.
 
@@ -126,8 +127,52 @@ Feedback messages that appear after the process has returned a result should cle
 
 [Asynchronous UX](https://gitnation.com/contents/asynchronous-ux) - Toni Petrina, React Advanced Conference 2021
 
-## Related pages
-
-[Building Forms](https://www.marigold-ui.io/patterns/building-forms)
-
-[Forms](https://www.marigold-ui.io/recipes/form-recipes)
+## Related
+
+<TeaserList
+  items={[
+    {
+      title: 'Building Forms',
+      href: '../../patterns/building-forms',
+      caption:
+        'This page should introduce you on how to build forms with Marigold.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"
+          />
+        </svg>
+      ),
+    },
+    {
+      title: 'Forms',
+      href: '../recipes/forms',
+      caption: 'Here you can find some recipes for some form components.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          class="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3 8.25V18a2.25 2.25 0 0 0 2.25 2.25h13.5A2.25 2.25 0 0 0 21 18V8.25m-18 0V6a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6ZM7.5 6h.008v.008H7.5V6Zm2.25 0h.008v.008H9.75V6Z"
+          />
+        </svg>
+      ),
+    },
+  ]}
+/>