Skip to main content

afrigov is an open-source project. It is not a government website and is not affiliated with any government.

Previewing neutral core Change

afrigov Accessible government design system

Footer

Link columns, then a bar with the flag, a copyright line and the legal links.

Contact

Ministry of Interior
1 Government Road
The Capital

© Ministry of Interior, The Government

Show HTML
<div class="ag-footer" style="margin-top: 0">
  <div class="ag-container">
    <div class="ag-footer__columns">
      <div>
        <h2 class="ag-footer__heading">Services</h2>
        <ul class="ag-footer__list">
          <li><a href="#footer-example">Passports</a></li>
          <li><a href="#footer-example">National ID</a></li>
          <li><a href="#footer-example">Driving licences</a></li>
        </ul>
      </div>
      <div>
        <h2 class="ag-footer__heading">About</h2>
        <ul class="ag-footer__list">
          <li><a href="#footer-example">The ministry</a></li>
          <li><a href="#footer-example">Contact</a></li>
        </ul>
      </div>
      <div>
        <h2 class="ag-footer__heading">Help</h2>
        <ul class="ag-footer__list">
          <li><a href="#footer-example">Accessibility</a></li>
          <li><a href="#footer-example">Report a problem</a></li>
        </ul>
      </div>
      <div>
        <h2 class="ag-footer__heading">Contact</h2>
        <address class="ag-footer__address">
          Ministry of Interior<br />
          1 Government Road<br />
          The Capital
        </address>
        <ul class="ag-social">
          <li>
            <a class="ag-social__link" href="#footer-example"
              ><svg class="ag-social__icon" aria-hidden="true" viewBox="0 0 24 24">
                <path
                  d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"
                /></svg
              >Facebook</a
            >
          </li>
          <li>
            <a class="ag-social__link" href="#footer-example"
              ><svg class="ag-social__icon" aria-hidden="true" viewBox="0 0 24 24">
                <path
                  d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"
                /></svg
              >X</a
            >
          </li>
        </ul>
      </div>
    </div>
    <div class="ag-footer__bar">
      <span class="ag-flag" aria-hidden="true"><span></span><span></span><span></span></span>
      <p>© Ministry of Interior, <span data-docs-string="government">The Government</span></p>
      <ul class="ag-footer__legal">
        <li><a href="#footer-example">Privacy</a></li>
        <li><a href="#footer-example">Terms</a></li>
      </ul>
    </div>
  </div>
</div>

The address and the social links go in a Contact column, so the footer is also where people look for a way to reach you.

The columns fit as many across as the width allows, each at least 10rem wide, and wrap the rest: four across on a laptop, two on a tablet, one on a small phone. There is no fixed number.

Variant: light

For a site whose header is already dark, or whose pack colour is heavy, ag-footer--light puts the footer on the alternate paper colour with dark text. The primary stripe along the top stays.

© National Water Agency

Show HTML
<div class="ag-footer ag-footer--light" style="margin-top: 0">
  <div class="ag-container">
    <div class="ag-footer__columns">
      <div>
        <h2 class="ag-footer__heading">Services</h2>
        <ul class="ag-footer__list">
          <li><a href="#footer-light">Report a leak</a></li>
          <li><a href="#footer-light">Pay a bill</a></li>
        </ul>
      </div>
      <div>
        <h2 class="ag-footer__heading">About</h2>
        <ul class="ag-footer__list">
          <li><a href="#footer-light">The agency</a></li>
          <li><a href="#footer-light">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="ag-footer__bar">
      <span class="ag-flag" aria-hidden="true"><span></span><span></span><span></span></span>
      <p>© National Water Agency</p>
    </div>
  </div>
</div>

Variant: with the flag stripe

ag-footer--striped replaces the footer's top border with the country's flag colours, to match a striped header. It works with the light variant too.

© National Water Agency

Show HTML
<div class="ag-footer ag-footer--striped" style="margin-top: 0">
  <div class="ag-container">
    <div class="ag-footer__bar">
      <span class="ag-flag" aria-hidden="true"><span></span><span></span><span></span></span>
      <p>© National Water Agency</p>
    </div>
  </div>
</div>

Accessibility

  • Use the footer element so it is a landmark. Only one per page.
  • Column headings are h2. Screen reader users navigate footers by heading.
  • An accessibility statement link belongs here on every government site.
  • Links are white on the dark panel at 16:1. Do not lighten the panel.