Merge pull request #333 from newrelic/jerel/guide-tile-hover

Add hover state to guide tiles
newrelic · Jun 29, 2020 · 28929db · 28929db
2 parents bbce08e + 329da61
commit 28929db
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/src/components/GuideTile/GuideTile.module.scss b/src/components/GuideTile/GuideTile.module.scss
@@ -7,6 +7,12 @@
   border: 1px solid var(--color-neutrals-300);
   border-radius: 0.25rem;
   position: relative;
+  transition: all 0.15s ease-out;
+
+  &:hover {
+    transform: translateY(-2px);
+    border: 1px solid var(--color-neutrals-400);
+  }
 }
 
 .tileWithIcon h2 {

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -115,7 +115,11 @@ const IndexPage = ({ data, pageContext }) => {
             </header>
             <GuideListing.List>
               {getStartedGuides.map((guide, index) => (
-                <GuideTile key={index} {...guide}>
+                <GuideTile
+                  key={index}
+                  className={styles.featuredGuide}
+                  {...guide}
+                >
                   <GuideTile.Button to={guide.path}>
                     Start the guide
                   </GuideTile.Button>

diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -32,6 +32,7 @@
 
 .guideListing {
   --guide-list-row-height: auto;
+
   margin-top: 0;
 }
 
@@ -105,3 +106,10 @@
 .allGuidesListing {
   margin-top: 1rem;
 }
+
+.featuredGuide {
+  &:hover {
+    transform: unset;
+    border-color: var(--color-neutrals-300);
+  }
+}