focus, hover styles

src/components/link-box/link-box.scss

@@ -142,9 +142,9 @@
         font-family: var(--main-font-family);
         letter-spacing: -0.6px;
         margin-bottom: 8px;
-        // Margin if there is an image above the title
-        margin-top: 20px;
         // Margin if there is no image above the title
+        margin-top: 20px;
+        // Margin if there is an image above the title
         &__image {
           margin-top: 16px;
         }
@@ -183,9 +183,9 @@
           @include font-size(28px, 36px);
           letter-spacing: -0.8px;
           margin-bottom: 12px;
-          // Margin if there is an image above the title
-          margin-top: 32px;
           // Margin if there is no image above the title
+          margin-top: 32px;
+          // Margin if there is an image above the title
           &__image {
             margin-top: 20px;
           }
@@ -225,20 +225,12 @@
     .hy-link-box__text-container {
       margin-bottom: 60px;
       padding: 0 12px;
-      //20px btw pic and title, 24px above title if no pic
 
       @include breakpoint($narrow) {
         padding: 0 16px;
-        //20px btw pic and title, 24px above title if no pic
       }
       @include breakpoint($wide) {
         padding: 0 12px;
-        //16px btw pic and title, 24px above title if no pic
-      }
-      @include breakpoint($extrawide) {
-        &__large {
-          //20px btw pic and title, 32px above title if no pic
-        }
       }
 
       //@todo check title + description styles
@@ -249,7 +241,19 @@
         font-family: var(--main-font-family);
         letter-spacing: -0.5px;
         margin-bottom: 8px;
+        // Margin if there is no image above the title
+        margin-top: 24px;
+        // Margin if there is an image above the title
+        &__image {
+          margin-top: 20px;
+        }
 
+        @include breakpoint($wide) {
+          // Margin if there is an image above the title
+          &__image {
+            margin-top: 16px;
+          }
+        }
         @include breakpoint($extrawide) {
           // with sidebar
           &__common {
@@ -261,6 +265,12 @@
             @include font-size(20px, 24px);
             letter-spacing: -0.6px;
             margin-bottom: 12px;
+            // Margin if there is no image above the title
+            margin-top: 32px;
+            // Margin if there is an image above the title
+            &__image {
+              margin-top: 20px;
+            }
           }
         }
         @include breakpoint($xlarge) {
@@ -268,6 +278,12 @@
           @include font-size(20px, 24px);
           letter-spacing: -0.6px;
           margin-bottom: 12px;
+          // Margin if there is no image above the title
+          margin-top: 32px;
+          // Margin if there is an image above the title
+          &__image {
+            margin-top: 20px;
+          }
         }
       }
 
@@ -280,6 +296,16 @@
       }
     }
   }
+
+  // General styles for title
+  .hy-link-box__text-container {
+    &__title {
+      &__hover {
+        color: var(--brand-main);
+        text-decoration: underline;
+      }
+    }
+  }
 }
 
 .hy-link-box-link {
@@ -288,7 +314,7 @@
   right: -6px;
 
   svg {
-    background-color: var(--brand-main);
+    background-color: var(--brand-main-light);
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
     fill: var(--grayscale-white);
     height: 32px;
@@ -296,6 +322,12 @@
     width: 32px;
   }
 
+  &__hover {
+    svg {
+      background-color: var(--brand-main);
+    }
+  }
+
   @include breakpoint($extrawide) {
     // without sidebar, Landing MAJOR variation only
     &__landing.large {

src/components/link-box/link-box.tsx

@@ -49,6 +49,38 @@ export class LinkBox implements ComponentInterface {
     window.open(card.dataset.location, card.dataset.target);
   }
 
+  @Listen('mouseenter')
+  handleMouseEnter(event) {
+    this.manageHoverEffect(event.currentTarget);
+  }
+
+  @Listen('mouseleave')
+  handleMouseLeave(event) {
+    this.manageHoverEffect(event.currentTarget, false);
+  }
+
+  @Listen('focusin')
+  handleOnFocusIn(event) {
+    this.manageHoverEffect(event.currentTarget);
+  }
+
+  @Listen('focusout')
+  handleOnFocusOut(event) {
+    this.manageHoverEffect(event.currentTarget, false);
+  }
+
+  manageHoverEffect(linkbox, hoverOn = true) {
+    let title = linkbox.shadowRoot.querySelector('h3.hy-link-box__text-container__title');
+    let boxLink = linkbox.shadowRoot.querySelector('.hy-link-box-link');
+    if (hoverOn) {
+      (title as HTMLElement).classList.add('hy-link-box__text-container__title__hover');
+      (boxLink as HTMLElement).classList.add('hy-link-box-link__hover');
+    } else {
+      (title as HTMLElement).classList.remove('hy-link-box__text-container__title__hover');
+      (boxLink as HTMLElement).classList.remove('hy-link-box-link__hover');
+    }
+  }
+
   render() {
     const classContainerAttributes = ['hy-link-box-container'].join(' ');