Basic layout for callout boxes

Author: djanelle-mit

app/assets/stylesheets/partials/_results.scss

@@ -121,6 +121,7 @@
 }
 
 /* USE Specific Overrides */
+/* Layout of results and sidebar columns */
 #content-wrapper {
   padding-top: 12px;
   padding-bottom: 44px;
@@ -191,4 +192,24 @@
   }
 
 
+}
+
+/* Callouts below results */
+#callout-wrapper {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 32px;
+
+  aside {
+    border: 3px solid $color-border-default;
+    padding: 20px 24px;
+
+    p {
+      line-height: 1.4;
+    }
+  }
+
+  @media (max-width: $bp-screen-md) {
+    flex-direction: column;
+  }
 }

app/views/search/_results_callouts.html.erb

@@ -1 +1,18 @@
-PLACEHOLDER FOR CALLOUTS
+<div id="callout-wrapper">
+    <aside class="result-callout">
+        <i></i>
+        <div>
+            <h4>Refine your search</h4>
+            <p>Use advanced search features to expand or filter your search.</p>
+            <a href="#">Search Primo</a>
+        </div>
+    </aside>
+    <aside class="result-callout">
+        <i></i>
+        <div>
+            <h4>Can’t find a book?</h4>
+            <p>If we don’t own it you can often request it from another library.</p>
+            <a href="#">Search WorldCat</a>
+        </div>
+    </aside>
+</div>