diff --git a/playbook-website/app/views/pages/kit_show.html.erb b/playbook-website/app/views/pages/kit_show.html.erb
index add9c6282a..ea42757bb5 100755
--- a/playbook-website/app/views/pages/kit_show.html.erb
+++ b/playbook-website/app/views/pages/kit_show.html.erb
@@ -39,12 +39,12 @@
<% end %>
<% if @icons_used %>
- <%= pb_rails("flex", props: { inline: true, align: "center" }) do %>
+ <%= pb_rails("flex", props: { inline: true, align: "center", hover: { shadow: "deep" } }) do %>
<%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
<%= pb_rails("icon", props: { icon: "icons" }) %>
<% end %>
<%= pb_rails("flex/flex_item", props: { align_items: "start", flex: "8" }) do %>
-
+
<%= pb_rails("detail", props: { text: "Uses Icons", size: 'xs', margin: "xxs" }) %>
<% end %>
@@ -54,14 +54,14 @@
<% end %>
<% end %>
<% if @react_rendered %>
- <%= pb_rails("flex", props: { inline: true, align: "center" }) do %>
+ <%= pb_rails("flex", props: { inline: true, align: "center", hover: { shadow: "deep" } }) do %>
<%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
<% end %>
<%= pb_rails("flex/flex_item", props: { align_items: "start", flex: "8" }) do %>
-
+
<%= pb_rails("detail", props: { text: "React Rendered", size: 'xs', margin: "xxs" }) %>
<% end %>
@@ -71,14 +71,14 @@
<% end %>
<% end %>
<% if @enhanced_element_used %>
- <%= pb_rails("flex", props: { inline: true, align: "center" }) do %>
+ <%= pb_rails("flex", props: { inline: true, align: "center", hover: { shadow: "deep" } }) do %>
<%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
<% end %>
<%= pb_rails("flex/flex_item", props: { align_items: "start", flex: "8" }) do %>
-
+
<%= pb_rails("detail", props: { text: "Javascript Enhanced", size: 'xs', margin: "xxs" }) %>
<% end %>