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 &&
{description}
- {tags.length > 0 && ( -