Skip to content

Site footer

Preview Available in release assets

Close the page with supporting navigation, ownership, and policy information.

Show code
<footer class="thin-site-footer">
  <div>
    <strong>Northline</strong>
    <p><small>Independent stories since 2018.</small></p>
  </div>
  <nav aria-label="About">
    <strong>About</strong>
    <ul>
      <li><a href="/mission/">Mission</a></li>
      <li><a href="/accessibility/">Accessibility</a></li>
    </ul>
  </nav>
  <nav aria-label="Legal">
    <strong>Legal</strong>
    <ul>
      <li><a href="/privacy/">Privacy</a></li>
      <li><a href="/terms/">Terms</a></li>
    </ul>
  </nav>
</footer>

Anatomy

  • Footer landmark
  • Brand or ownership text
  • Separately labelled navigation groups
  • Semantic link lists

Variants and sizes

  • Compact footer
  • Multiple navigation groups
  • Legal and locale controls

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Long localized link labels
  • Multiple nav landmarks
  • Narrow container
  • Right-to-left content
  • Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links retain native navigation; language or locale changes use links or a native form according to server routing.

Accessibility

Give multiple footer navigation landmarks distinct names, keep visible group headings, and avoid duplicating the primary navigation without purpose.

Contract
COMPOSE
Basis
Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use footer.thin-site-footer with labelled nav elements and semantic lists.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Landmarks, headings, links, media, disclosure, and native forms remain useful in normal document flow without CSS or JavaScript.

Assets and dependencies

  • /foundation.css
  • /layouts.css
  • /components.css
  • /patterns/marketing.css
  • /icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/marketing/style.ts