Global footer

Site footer with author card and social links.

A single-region footer that sits at the base of every page. Shows the author card on the left and a row of social-media icons on the right. Separated from the page body by a heavy top border.

Structure

Source

Live markup is at engine/templates/components/footer/global.html. It uses the author card pattern with real social icons.

<footer id="site-footer" class="grid padding-top padding-bottom" style="--mult: 2;">
  <aside id="author-card">
    <div id="author--bio" class="h-card vcard p-author">
      <a class="author--photo author--photo--link" rel="me" href="{{ site.url }}" title="Visit my website" tabindex="-1">
        <img class="u-photo hidden" alt="{{ site.avatar.alt }}" loading="lazy" src="{{ site.url | append: site.avatar.image }}">
      </a>
      <p class="p-name author--name">
        <a rel="author" class="no-underline u-uid" href="{{ site.url }}">
          <strong><span class="p-given-name">John</span> <span class="p-family-name">Peart</span></strong>
        </a>
      </p>
      <p class="author--url link-secondary small-text secondary-text">
        <a href="{{ site.url }}" rel="me" class="link-secondary no-underline u-url">www.johnpe.art</a>
      </p>
    </div>

    {% unless footer.social == false %}
    <div class="author--icons">
      <div class="author-icon mastodon">
        {% include "components/social-icons/social-icon.html", url: site.mastodon.url, icon: "components/icons/mastodon.svg", tooltip: "Follow me on Mastodon", label: "Mastodon" %}
      </div>
      <div class="author-icon bluesky">
        {% include "components/social-icons/social-icon.html", url: site.bluesky.url, icon: "components/icons/bluesky.svg", tooltip: "Follow me on Bluesky", label: "Bluesky" %}
      </div>
      <div class="author-icon linkedin">
        {% include "components/social-icons/social-icon.html", url: site.linkedin.url, icon: "components/icons/linkedin.svg", tooltip: "Connect with me on LinkedIn", label: "LinkedIn" %}
      </div>
      <div class="author-icon github">
        {% include "components/social-icons/social-icon.html", url: site.github.url, icon: "components/icons/github.svg", tooltip: "Find me on GitHub", label: "GitHub" %}
      </div>
    </div>
    {% endunless %}
  </aside>
</footer>

Responsive behaviour

On mobile the icon row stacks below the author card. At the 700px breakpoint it moves to the right of the card in a two-column grid.

Accessibility

Each social link has an aria-label. The footer is wrapped in <footer> so it's announced as a landmark region.