Merge pull request #278 from cisagov/rjm/250-no-summary-box-for-featu…

…red-domain

Issue #250: Use info alert instead of summary box for featured domain

_includes/blog-preview.html

@@ -15,4 +15,4 @@ <h4 class="title-bullet font-heading-lg margin-bottom-05 margin-top-1">
   </li>
   {% endfor %}
 </ul>
-<a class="usa-link" href="{{ '/blog/' | url }}">More blog posts</a>
+<a class="usa-link margin-bottom-4 display-block" href="{{ '/blog/' | url }}">More blog posts</a>

_includes/featured-dotgov.html

@@ -1,18 +1,14 @@
 <div
-    class="usa-summary-box"
-    role="region"
-    aria-labelledby="summary-box-key-information"
+    class="usa-alert usa-alert--info usa-alert--info--variant padding-y-3 usa-alert--no-icon"
     >
-    <div class="usa-summary-box__body">
-      <h2>
+    <div class="usa-alert__body">
+      <h2 class="usa-alert__heading font-sans-xl">
         Featured .gov
       </h2>
-  <div class="usa-summary-box__text">
-    <h4 class="font-heading-lg text-semibold margin-top-205 margin-bottom-205">
-      <a class="usa-link usa-link--external" rel="noopener noreferrer" href="https://read.gov/">Read.gov</a>
-    </h4>
-    <p>Managed by the Library of Congress, Read.gov invites all people to discover the fascinating ideas, places, and events that await you within each book.</p>
-    <p><a class="usa-link" href="{{ '/about/data' | url }}">Explore .gov data</a></p>  
-  </div>
+      <h4 class="font-heading-lg text-semibold margin-top-205 margin-bottom-205">
+        <a class="usa-link usa-link--external" rel="noopener noreferrer" href="https://read.gov/">Read.gov</a>
+      </h4>
+      <p>Managed by the Library of Congress, Read.gov invites all people to discover the fascinating ideas, places, and events that await you within each book.</p>
+      <p><a class="usa-link" href="{{ '/about/data' | url }}">Explore .gov data</a></p>  
     </div>
 </div>

styles/_uswds-theme-custom-styles.scss

@@ -69,6 +69,12 @@ a.usa-button:not(.usa-button--unstyled, .usa-button--outline):active {
   color: color('white');
 }
 
+.usa-alert--info--variant {
+  background-color: color('primary-lightest');
+  border: 1px solid color('accent-cool-light');
+  border-radius: .25rem;
+}
+
 /*---------------------------------------------------------
 TYPOGRAPHY
 ----------------------------------------------------------*/