diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss
index 6372debb0..dafc3317c 100644
--- a/app/assets/stylesheets/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -9,13 +9,13 @@
 
   .heading {
     @include brand-color;
+    @include card;
     border: 2px solid $border;
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     margin-bottom: $line-height / 2;
     margin-top: $line-height / 4;
     padding: $line-height / 2;
-    position: relative;
     width: 100%;
 
     @include breakpoint(medium) {
@@ -26,31 +26,9 @@
       width: calc(100% / 6 - #{$spacing});
     }
 
-    &:focus-within {
-      outline: $outline-focus;
-
-      a:focus {
-        outline: none;
-      }
-    }
-
     a {
       font-weight: bold;
 
-      &::after,
-      &::before {
-        bottom: 0;
-        content: "";
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-
       &:hover::before {
         background: $light;
         z-index: -1;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index fcda6b480..b2f589353 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1986,11 +1986,13 @@ table {
   }
 
   .recommendation {
+    @include card;
     background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
     margin-bottom: $line-height / 4;
     padding: $line-height / 2;
+    z-index: 1;
 
     &:hover {
       box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
@@ -2003,6 +2005,7 @@ table {
   position: absolute;
   right: 12px;
   top: -18px;
+  z-index: 2;
 }
 
 // 20. Documents
diff --git a/app/assets/stylesheets/mixins/links.scss b/app/assets/stylesheets/mixins/links.scss
new file mode 100644
index 000000000..e4fe18102
--- /dev/null
+++ b/app/assets/stylesheets/mixins/links.scss
@@ -0,0 +1,27 @@
+@mixin card {
+  position: relative;
+
+  &:focus-within {
+    outline: $outline-focus;
+
+    a:focus {
+      outline: none;
+    }
+  }
+
+  a {
+    &::after,
+    &::before {
+      bottom: 0;
+      content: "";
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
diff --git a/app/views/shared/_recommended_index.html.erb b/app/views/shared/_recommended_index.html.erb
index e7c7d3835..4447a9ae4 100644
--- a/app/views/shared/_recommended_index.html.erb
+++ b/app/views/shared/_recommended_index.html.erb
@@ -18,11 +18,9 @@
 
       <% recommended.each_with_index do |recommended, index| %>
         <div class="small-12 medium-6 large-4 column end">
-          <%= link_to recommended_path(recommended) do %>
-            <div class="recommendation" data-equalizer-watch>
-              <h3><%= recommended.title %></h3>
-            </div>
-          <% end %>
+          <div class="recommendation" data-equalizer-watch>
+            <h3><%= link_to recommended.title, recommended_path(recommended) %></h3>
+          </div>
         </div>
       <% end %>