Footer

CSS file

The footer should be used throughout certify.SBA.gov to provide branding and supporting links.

Demo

  
    <footer role="contentinfo">
      <nav class="sba-u-border-y--1">
        <div class="sba-l-container">
          <div class="sba-l-row">
            <div class="sba-l-col--12 sba-l-md-col--3 sba-l-lg-col--2 sba-u-margin-right--4 sba-u-md-padding-y--3 sba-u-padding-y--2">
              <a class="sba-u-font-weight--bold sba-u-color--base sba-u-text-decoration--none" href="http://sba.gov/contracting" target="_blank">SBA.gov/contracting</a>
            </div>
            <div class="sba-l-col--12 sba-l-md-col--3 sba-l-lg-col--2 sba-u-margin-right--4 sba-u-md-padding-y--3 sba-u-padding-y--2">
              <a class="sba-u-font-weight--bold sba-u-color--base sba-u-text-decoration--none" href="http://whitehouse.gov/" target="_blank">WhiteHouse.gov</a>
            </div>
            <div class="sba-l-col--12 sba-l-md-col--3 sba-l-lg-col--2 sba-u-margin-right--4 sba-u-md-padding-y--3 sba-u-padding-y--2">
              <a class="sba-u-font-weight--bold sba-u-color--base sba-u-text-decoration--none" href="http://regulations.gov/" target="_blank">Regulations.gov</a>
            </div>
            <div class="sba-l-col--12 sba-l-md-col--3 sba-l-lg-col--2 sba-u-margin-right--4 sba-u-md-padding-y--3 sba-u-padding-y--2">
              <a class="sba-u-font-weight--bold sba-u-color--base sba-u-text-decoration--none" href="https://business.usa.gov/" target="_blank">BusinessUSA.gov</a>
            </div>
            <div class="sba-l-col--12 sba-l-md-col--3 sba-l-lg-col--2 sba-u-margin-right--4 sba-u-md-padding-y--3 sba-u-padding-y--2">
              <a class="sba-u-font-weight--bold sba-u-color--base sba-u-text-decoration--none" href="http://usa.gov/" target="_blank">USA.gov</a>
            </div>
          </div>
        </div>
      </nav>
      <div class="sba-l-container">
        <div class="sba-l-row">
          <div class="sba-l-col--12 sba-l-md-col--6 sba-u-padding-y--3 sba-u-md-padding-y--5">
            <a href="http://www.sba.gov" target="_blank">
              <img alt="U.S. Small Business Administration logo" width="300px" src="/certify-design-system-documentation/assets/img/sba-logo.png">
            </a>
          </div>
          <div class="sba-l-col--12 sba-l-md-col--6 sba-u-display--flex sba-u-flex-direction--column sba-u-md-align-items--flex-end  sba-u-md-padding-y--3">
            <div class="sba-footer-social_links">
              <a class="sba-u-text-decoration--none" href="https://www.facebook.com/SBAgov" target="_blank" title="Follow certify.SBA.gov on facebook!">
                <img alt="facebook logo icon" src="/certify-design-system-documentation/assets/img/facebook.png" width="38px">
              </a>
              <a class="sba-u-text-decoration--none" href="https://www.twitter.com/sbagov" target="_blank" title="Follow certify.SBA.gov on twitter!">
                <img alt="twitter logo icon" src="/certify-design-system-documentation/assets/img/twitter.png" width="38px">
              </a>
              <a class="sba-u-text-decoration--none" href="https://www.youtube.com/c/sbagov" target="_blank" title="Follow certify.SBA.gov on YouTube!">
                <img alt="youtube logo icon" src="/certify-design-system-documentation/assets/img/youtube.png" width="38px">
              </a>
            </div>
            <h3 class="sba-u-margin-top--1">Contact SBA</h3>
            <a href="mailto:help@certify.sba.gov">help@certify.sba.gov</a>
          </div>
        </div>
      </div>
      <div class="sba-footer-dev-notes sba-u-padding-y--1 sba-u-border-top--1 sba-u-margin-top--4 sba-u-md-margin-top--0">
        <div class="sba-l-container">
          <span class="sba-u-font-size--small">Version: 3.0.1 build 159000</span>
        </div>
      </div>
    </footer>
  

Guidelines

• The footer does not provide padding above itself, you should provide padding as needed.
• The version number may be omitted.