First pass of Suggestion Panel Component - to be later extracted into first design system component.

app/assets/stylesheets/application.scss

@@ -14,3 +14,4 @@
 
 @import "libraries-main";
 @import "partials/_search";
+@import "partials/_suggestion-panel";

app/assets/stylesheets/partials/_suggestion-panel.scss

@@ -0,0 +1,106 @@
+/* Color Variables */
+
+// Core
+$blue-500: #0000FF;
+
+$purple-700: #990099;
+
+$white: #fff;
+$gray-100: #F2F2F2;
+$black: #111;
+
+@mixin focus-outline {
+    &:focus {
+        outline: 3px solid $blue-500;
+    }    
+}
+
+@mixin hover-transition {
+    transition: all .25s ease-in-out 0s;
+}
+
+// Semantic
+$color-suggestion-border: $purple-700;
+$color-suggestion-accent-text: $purple-700;
+
+/* Suggestion Panel */
+.mitlib-suggestion-panel {
+    border: 4px solid $color-suggestion-border;
+
+    display: flex;
+    column-gap: 24px;
+
+    padding: 20px 24px;
+    position: relative;
+
+    .panel-type {
+        color: $color-suggestion-accent-text;
+        font-size: 14px;
+        font-weight: 600;
+        margin-bottom: 8px;
+    }
+
+    h3 {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 1.25;
+        margin-bottom: 8px;
+    }
+
+    p {
+        font-size: 16px;
+    }
+
+    ul.metadata {
+        font-size: 14px;
+        list-style: none inside;
+        padding-left: 0;
+        margin-bottom: 20px;
+    }
+
+    // This would need to be extracted into an Icon Button in the future.
+    button.dismiss {
+        //Temporarily hiding until we can move to a prop
+        display: none;
+
+        width: 48px;
+        height: 48px;
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        background-color: $white;
+        border: none;
+        color: $black;
+        cursor: pointer;
+        font-weight: 600;
+
+	    @include hover-transition;
+
+        @include focus-outline;
+
+        &:hover {
+            background-color: $gray-100;
+        }
+    }
+}
+
+/* Button styles to be extracted into button component */
+.button.secondary {
+    border: 1px solid $black;
+    border-radius: 0;
+    display: inline-block;
+    padding: 6px 12px;
+    text-decoration: none;
+    font-size: 16px;
+    font-weight: 600;
+
+    @include hover-transition;
+
+    @include focus-outline;
+
+    &:hover {
+        color: $white;
+        background-color: $black;
+    }
+}

app/views/intervention/doi.html.erb

@@ -1,50 +1,36 @@
 <% return unless @json.present? %>
 
-<div id="doi-fact" class="panel fact">
-  <div class="panel-body">
-    <div class="layout-1q3q layout-band">
-      <div class="col1q">
-        <% if @json[:journal_image].present? %>
-          <%= image_tag(@json[:journal_image], style: '  display: block;
-  margin-left: auto;
-  margin-right: auto;
-') %>
-        <% end %>
-      </div>
-
-      <div class="col3q">
-        <h3><%= @json[:title] %></h3>
-
-        <p>In: <%= @json[:journal_name] %></p>
-
+<aside class="mitlib-suggestion-panel">
+  <div class="image-wrapper">
+    <% if @json[:journal_image].present? %>
+      <%= image_tag(@json[:journal_image]) %>
+    <% end %>
+  </div>
+  <div class="panel-content">
+    <button aria-label="Dismiss suggestion" class="dismiss fa fa-times fa-lg"></button>
+    <p class="panel-type">Suggested resource</p>
+    <h3><%= @json[:title] %></h3>
+    <p><%= @json[:journal_name] %></p>
+
+    <% if @json[:oa_status] || @json[:best_oa_location].present? || @json[:journal_link].present? %>
+      <ul class="metadata">
         <% if @json[:oa_status] %>
-        <p>
-          Open Access: 
-            <%= @json[:oa_status] %>
-        </p>
+          <li>
+            Open Access: 
+              <%= @json[:oa_status] %>
+          </li>
         <% end %>
 
-
         <% if @json[:best_oa_location].present? %>
-          <p><%= link_to('Open Access Link', @json[:best_oa_location]["url"]) %></p>
+          <li><%= link_to('Open Access Link', @json[:best_oa_location]["url"]) %></li>
         <% end %>
 
         <% if @json[:journal_link].present? %>
-          <p><%= link_to('Browse issues', @json[:journal_link]) %></p>
-        <% end %>
-
-        <p>
-          <%= link_to('Check MIT Subscription Access', @json[:link_resolver_url], class: 'btn button-primary') %>
-        </p>
-
-      </div>
-    </div>
-
-
-
-
+          <li><%= link_to('Browse issues of this publication', @json[:journal_link]) %></li>
+        <% end %> 
+      </ul>
+    <% end %> 
 
-
-    </ul>
+    <%= link_to('Check MIT subscription access', @json[:link_resolver_url], class: 'button secondary') %>
   </div>
-</div>
+</aside>