Merge pull request #67 from cloud-gov/footer-identifier

Footer identifier

_includes/footer.html

@@ -1,30 +1,66 @@
 <footer class="usa-footer site-footer" role="contentinfo">
-  <div class="footer-section-bottom bg-base-lighter">
-    <div class="grid-container">
-      <div class="grid-row padding-3">
-        <div class="tablet:grid-col">
-          <div class="logo-links">
-            <a class="footer-logo media_link" href="https://cloud.gov">
-              {% image_with_class "./_img/logo-img.png" "width-10 height-auto" "Agency logo" %}
-            </a>
-          </div>
+  <div class="usa-identifier site-identifier">
+    <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier">
+        <div class="usa-identifier__container">
+            <div class="usa-identifier__logos">
+                <a href="https://www.gsa.gov">
+                    {% image_with_class "_img/gsa-logo.svg" "usa-identifier__logo" "GSA logo identifier" %}
+                </a>
+            </div>
+            <div class="usa-identifier__identity" aria-label="Agency description">
+                <p class="usa-identifier__identity-domain">cloud.gov</p>
+                <p class="usa-identifier__identity-disclaimer">
+                    An official website of the <a class="external_link" href="https://gsa.gov">General Services Administration</a>
+                </p>
+            </div>
         </div>
-        <div class="tablet:grid-col"></div>
-        <div class="tablet:grid-col">
-          <ul class="add-list-reset">
-            <li>Footer link</li>
-            <li>Footer link</li>
-            <li>Footer link</li>
-          </ul>
+    </section>
+    <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links">
+        <div class="usa-identifier__container">
+            <ul class="usa-identifier__required-links-list">
+                <li class="usa-identifier__required-links-item">
+                    <a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link usa-link">
+                        About GSA
+                    </a>
+                </li>
+                <li class="usa-identifier__required-links-item">
+                    <a href="https://www.gsa.gov/website-information/accessibility-aids" class="usa-identifier__required-link usa-link">
+                        Accessibility support
+                    </a>
+                </li>
+                <li class="usa-identifier__required-links-item">
+                    <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia" class="usa-identifier__required-link usa-link">
+                        FOIA requests
+                    </a>
+                </li>
+                <li class="usa-identifier__required-links-item">
+                    <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002" class="usa-identifier__required-link usa-link">
+                        No FEAR Act data
+                    </a>
+                </li>
+                <li class="usa-identifier__required-links-item">
+                    <a href="https://www.gsaig.gov/" class="usa-identifier__required-link usa-link">
+                        Office of the Inspector General
+                    </a>
+                </li>
+                <li class="usa-identifier__required-links-item">
+                    <a href="https://www.gsa.gov/reference/reports/budget-performance" class="usa-identifier__required-link usa-link">
+                        Performance reports
+                    </a>
+                </li>
+                <li class="usa-identifier__required-links-item">
+                    <a href="https://www.gsa.gov/website-information/website-policies" class="usa-identifier__required-link usa-link">
+                        Privacy policy
+                    </a>
+                </li>
+            </ul>
         </div>
-        <div class="tablet:grid-col">
-          <ul class="add-list-reset">
-            <li>Footer link</li>
-            <li>Footer link</li>
-            <li>Footer link</li>
-          </ul>
+    </nav>
+    <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="Government information and services">
+        <div class="usa-identifier__container">
+            <div class="usa-identifier__usagov-description">Looking for U.S. government information and services?</div>
+            <a href="https://www.usa.gov/" class="external_link">Visit USA.gov</a>
         </div>
-      </div>
-    </div>
+    </section>
   </div>
 </footer>

styles/styles.scss

@@ -6,4 +6,4 @@
   $theme-hero-image: '../_img/hero.png'
 );
 
-@forward 'uswds';
+@forward 'uswds';