fix: set minicard to be clickable not just image

adobe · Jun 7, 2023 · c293c01 · c293c01
1 parent 8af45a3
commit c293c01
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/packages/gatsby-theme-aio/src/components/MiniResourceCard/index.js b/packages/gatsby-theme-aio/src/components/MiniResourceCard/index.js
@@ -40,10 +40,11 @@ const Minicard = ({
 }) => {
     const Element = link ? GatsbyLink : 'div';
     return (
-        <div
-
+        <Element
+            to={href(link)}
             css={css`
             display: flex;
+            text-decoration: none;
 
             justify-content: ${!heading && !text && "center"}
 
@@ -56,13 +57,11 @@ const Minicard = ({
 
             @media screen and (max-width: ${MIN_MOBILE_SCREEN_WIDTH}) {
             max-width: calc(${layoutColumns(3.5)}) !important;
-            }        
-
+            }
         `}
         >
             {image ? (
-                <Element
-                    to={href(link)}
+                <div
                     css={css`
                     width:100px;
                     height:80px
@@ -88,7 +87,7 @@ const Minicard = ({
                     >
                         <HeroImage image={image} />
                     </h2>
-                </Element>
+                </div>
             ) : null}
 
             {text !== undefined || heading !== undefined ? (
@@ -153,7 +152,7 @@ const Minicard = ({
 
                 </div>
             ) : null}
-        </div>
+        </Element>
     );
 };