From 2c2b9f6c1f5b37c2ded9cc1c282bf2b18d6aee38 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Thu, 9 Jan 2025 09:58:24 -0500
Subject: [PATCH] docs: add alert with a link to iconography page

---
 docs/_includes/layouts/pages/element.11ty.ts | 28 +++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/docs/_includes/layouts/pages/element.11ty.ts b/docs/_includes/layouts/pages/element.11ty.ts
index f39bb287f5..07c7e31025 100644
--- a/docs/_includes/layouts/pages/element.11ty.ts
+++ b/docs/_includes/layouts/pages/element.11ty.ts
@@ -897,16 +897,24 @@ export default class ElementsPage extends Renderer<Context> {
 
   async #renderPlaygrounds(ctx: Context, entries: FileEntry[]) {
     const common = await this.#renderPlaygroundsCommon(ctx, entries);
-    return entries.map(([filename, config]) => this.#renderPlayground(
-      filename,
-      config,
-      ctx,
-      common,
-      entries
-          .filter(([, config]) => config.inline === filename)
-          .map(([s]) => s)
-
-    ));
+    const { tagName } = ctx;
+    const iconAlert = (tagName !== 'rh-icon') ? '' : html`<rh-alert state="info">
+        <h2 slot="header">Looking for the icons?</h2>
+        <p> Head over to our <a href="/foundations/iconography/">foundations iconography</a> page to explore the full collection.</p>
+      </rh-alert>
+      `;
+    return [
+      iconAlert,
+      entries.map(([filename, config]) => this.#renderPlayground(
+        filename,
+        config,
+        ctx,
+        common,
+        entries
+            .filter(([, config]) => config.inline === filename)
+            .map(([s]) => s)
+      )),
+    ].join('');
   };
 
   #renderPlayground(