From e4c158247a34b8a12ea969343650c7c1192e58bd Mon Sep 17 00:00:00 2001
From: Duncan Mackenzie <duncan.mackenzie@temporal.io>
Date: Fri, 21 Aug 2026 12:19:50 -0700
Subject: [PATCH] Move GridCard icon to an opaque 32px stamp on the tag row

Grows the SDK/language icon from 22px to 32px and relocates it out of
the card header (where it competed with title wrapping) down next to
the tags, so it reads as a stamp rather than a header ornament. Applies
uniformly to every GridCard consumer (AI Cookbook, IntegrationsGrid,
GuidesGrid, GridCardList) rather than a cookbook-only variant, per
design review of the four icon-treatment options in the mockup.
---
 .../elements/GridCard/GridCard.module.css     | 15 ++++++++++---
 src/components/elements/GridCard/GridCard.tsx | 22 +++++++++++--------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/elements/GridCard/GridCard.module.css b/src/components/elements/GridCard/GridCard.module.css
index 9126058a6d..4043bf23ba 100644
--- a/src/components/elements/GridCard/GridCard.module.css
+++ b/src/components/elements/GridCard/GridCard.module.css
@@ -62,11 +62,12 @@
   align-items: center;
   gap: 0.375rem;
   margin-left: auto;
+  flex-shrink: 0;
 }
 
 .icons svg {
-  width: 22px;
-  height: 22px;
+  width: 32px;
+  height: 32px;
   pointer-events: none;
 }
 
@@ -83,11 +84,19 @@
   flex: 1;
 }
 
+.cardFooter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: auto;
+}
+
 .cardMeta {
   display: flex;
   flex-wrap: wrap;
   gap: 0.375rem;
-  margin-top: auto;
+  flex: 1;
+  min-width: 0;
 }
 
 .badge {
diff --git a/src/components/elements/GridCard/GridCard.tsx b/src/components/elements/GridCard/GridCard.tsx
index 1939177043..19ff6bfdbc 100644
--- a/src/components/elements/GridCard/GridCard.tsx
+++ b/src/components/elements/GridCard/GridCard.tsx
@@ -45,7 +45,7 @@ export type GridCardProps = {
   description: string;
   href: string;
   tags?: string[];
-  /** Rendered top-right of the header, e.g. an SDK logo. */
+  /** Rendered bottom-right, alongside the tags, e.g. an SDK logo. */
   icon?: React.ReactNode;
   analyticsId?: string;
 };
@@ -69,16 +69,20 @@ export default function GridCard({ title, description, href, tags = [], icon, an
           {title}
           {showExternalIcon && <ExternalLinkIcon />}
         </h3>
-        {icon && <div className={styles.icons}>{icon}</div>}
       </div>
       <p className={styles.cardDescription}>{description}</p>
-      {tags.length > 0 && (
-        <div className={styles.cardMeta}>
-          {tags.map((tag) => (
-            <span key={tag} className={styles.badge}>
-              {tag}
-            </span>
-          ))}
+      {(tags.length > 0 || icon) && (
+        <div className={styles.cardFooter}>
+          {tags.length > 0 && (
+            <div className={styles.cardMeta}>
+              {tags.map((tag) => (
+                <span key={tag} className={styles.badge}>
+                  {tag}
+                </span>
+              ))}
+            </div>
+          )}
+          {icon && <div className={styles.icons}>{icon}</div>}
         </div>
       )}
     </Link>