Footer

The navy block that closes every aCo page: a short description, grouped links, social icons, and the aCo credit line. The footer at the bottom of this page is a live instance.

Anatomy

Description column — the product name and one or two sentences. Social links, when present, sit here.
Link columns — grouped under bold headings; each column is a list, and footer navigation is labelled (aria-label="Footer") so it is distinguishable from primary navigation.
Credit line — required on every aCo-built site: the small aCo logo, “Website by aCo Digital · Supported by aCo App”, linked to aco.digital and app.aco.digital.

Social links are icons

Social links are always icons — never text links, never the word “Facebook” spelled out in a link list. Each icon link still needs an accessible name via aria-label, and the icon itself is an inline SVG marked aria-hidden="true".

Live example — social icon links (demonstration targets)

<footer class="pds-footer">
  <div class="pds-footer__inner">
    <div>
      <h2>Pedantic Design System</h2>
      <p>What the footer is, in one or two sentences.</p>
      <ul class="pds-social">
        <li><a href="https://www.linkedin.com/" aria-label="aCo on LinkedIn">[icon]</a></li>
        <li><a href="https://www.facebook.com/" aria-label="aCo on Facebook">[icon]</a></li>
        <li><a href="https://www.instagram.com/" aria-label="aCo on Instagram">[icon]</a></li>
      </ul>
    </div>
    <nav aria-label="Footer">
      <h2>Documentation</h2>
      <ul class="pds-footer__list">
        <li><a href="/index.html">Overview</a></li>
        <li><a href="/foundations.html">Foundations</a></li>
      </ul>
    </nav>
    <div>
      <h2>aCo</h2>
      <ul class="pds-footer__list">
        <li><a href="https://aco.digital">aCo Digital</a></li>
        <li><a href="https://app.aco.digital">aCo App</a></li>
      </ul>
    </div>
    <p class="pds-footer__credit">
      <img src="/assets/aco-logo.png" alt="" width="20" height="20">
      <span>Website by <a href="https://aco.digital">aCo Digital</a> ·
      Supported by <a href="https://app.aco.digital">aCo App</a></span>
    </p>
  </div>
</footer>

Rules

Carry the credit line exactly as written, with the small aCo logo, on every aCo-built site.

Keep footer headings bold and link groups short.

Don’t

Don’t spell social links out as text, and don’t add platform badges or third-party “powered by” marks.

Don’t duplicate the entire sitemap in the footer — link the sections, not every page.

Accessibility notes

One <footer> (contentinfo) landmark per page.
Icon links get their names from aria-label; the SVGs are hidden from assistive technology.
Focus ring on navy is amber and remains clearly visible against both navy shades.