Site footer

The town footer — contact, hours and quick links in columns, with a meta line for provenance.

Show the markup

<footer class="cc-site-footer">
  <div class="cc-site-footer__cols">
    <section aria-labelledby="f-contact">
      <h2 id="f-contact">Contact</h2>
      <p>Town of Riverbend</p>
      <p>12 River St, Riverbend MA 01900</p>
    </section>
    <section aria-labelledby="f-hours">
      <h2 id="f-hours">Town Hall hours</h2>
      <p>Mon–Fri 8:00–4:00</p>
    </section>
    <section aria-labelledby="f-links">
      <h2 id="f-links">Quick links</h2>
      <ul>
        <li><a href="#">Departments</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Meetings, agendas &amp; minutes</a></li>
      </ul>
    </section>
  </div>
  <p class="cc-site-footer__meta">Powered by Baseline — every page on this site meets WCAG AAA.</p>
</footer>

Accessibility

Each column is a section labelled by its own heading, so footer landmarks navigate cleanly.
Links stay white on hover — no darker ink clears 7:1 on brand-deep in every theme — so the hover state is underline weight, never color alone.
Link rows carry a 40px minimum target; focus rings flip to white on the deep surface.