Merge pull request #4197 from owid/prominent-link-touchup

✨ center prominent link content when no description is present
owid · Nov 25, 2024 · 055b5c3 · 055b5c3
2 parents 5fe6edc + 82ab25e
commit 055b5c3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/site/gdocs/components/ProminentLink.tsx b/site/gdocs/components/ProminentLink.tsx
@@ -88,18 +88,32 @@ export const ProminentLink = (props: {
         ? "col-sm-start-4 col-md-start-3 col-start-2 col-end-limit"
         : "col-start-1 col-end-limit"
 
+    const shouldVerticallyCenter = !description
+
     return (
         <a
             className={cx(props.className, "prominent-link")}
             href={href}
             {...anchorTagProps}
         >
             {thumbnail ? (
-                <div className="prominent-link__image span-sm-cols-3 span-md-cols-2">
+                <div
+                    className={cx(
+                        "span-sm-cols-3 span-md-cols-2 prominent-link__image",
+                        {
+                            "prominent-link__image--centered":
+                                shouldVerticallyCenter,
+                        }
+                    )}
+                >
                     <Thumbnail thumbnail={thumbnail} />
                 </div>
             ) : null}
-            <div className={textContainerClassName}>
+            <div
+                className={cx(textContainerClassName, {
+                    "prominent-link__text--centered": shouldVerticallyCenter,
+                })}
+            >
                 <div className="prominent-link__heading-wrapper">
                     <h3 className="h3-bold">{title}</h3>
                     {linkType === "url" && (

diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
@@ -1010,6 +1010,13 @@ div.raw-html-table__container {
         margin-top: 4px;
     }
 
+    .prominent-link__image--centered,
+    .prominent-link__text--centered {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
     .prominent-link__heading-wrapper {
         display: flex;
         justify-content: space-between;