Footer

Four patterns. From a single line to a full columnar footer with agent metadata.

ASW's <footer> is a direct child of <body> and shares the same container constraints as <nav> and <main> — consistent margins at all breakpoints, no class required. Inside, use any layout pattern: minimal prose, grid columns, nav links, or agent session metadata.

Minimal

A single line. Dim text, small size. Everything a static page needs.

<footer>
  <p data-text="dim small">Site Name — section</p>
</footer>

The footer at the bottom of this page is a live demo. data-text="dim small" applies both the muted colour and the reduced size in one attribute.

With copyright

<footer>
  <p data-text="dim small">© 2026 Ludo. All rights reserved.</p>
</footer>

With build metadata

Useful on statically-generated pages — record the generation time without ceremony.

<footer>
  <p data-text="dim small">Built 2026-04-01 · <a href="/source">Source</a></p>
</footer>

Footer with nav

Secondary links below the main content. A <nav> inside <footer> — same pipe-separated style as the top nav, same active state via aria-current.

<footer>
  <nav>
    <ul><li><a href="/"><strong>Brand</strong></a></li></ul>
    <ul>
      <li><a href="/about/">About</a></li>
      <li><a href="/privacy/">Privacy</a></li>
      <li><a href="/source" data-text="dim">Source</a></li>
    </ul>
  </nav>
</footer>

Live demo:

Footer nav rendered above.

Columnar

A three-column footer using data-layout="grid-3" inside <footer>. Each column is an independent <section> — an about blurb, a link list, a contact block. Collapses to single column on narrow screens.

<footer>
  <div data-layout="grid-3">
    <section>
      <h4>About</h4>
      <p data-text="dim small">Short description of who you are or what this site is.</p>
    </section>
    <section>
      <h4>Links</h4>
      <ul>
        <li><a href="/projects/">Projects</a></li>
        <li><a href="/now/">Now</a></li>
        <li><a href="/status/">Status</a></li>
      </ul>
    </section>
    <section>
      <h4>Contact</h4>
      <p data-text="dim small"><a href="mailto:hello@example.com">hello@example.com</a></p>
    </section>
  </div>
  <p data-text="dim small" style="margin-top: var(--asw-space-6)">© 2026 Brand. All rights reserved.</p>
</footer>

Live demo:

About

An agentic-native web framework. Semantic HTML, zero classes, designed for clarity at machine and human scale.

Contact

hello@example.com

Forgejo · GitHub

Two-column variant

Use data-layout="grid-2" for simpler footers — a summary on the left, links on the right.

<footer>
  <div data-layout="grid-2">
    <p data-text="dim small">Site Name — short tagline or description.</p>
    <nav>
      <ul>
        <li><a href="/about/">About</a></li>
        <li><a href="/privacy/">Privacy</a></li>
      </ul>
    </nav>
  </div>
</footer>

Agent footer

Session metadata in the footer. The vault-native pattern — records the agent session, model, and timestamp that generated the page. Use data-session-meta for the metadata block.

This is how Vigilio-generated pages carry provenance: last updated time, session identity, and build mode — without ceremony, without cluttering the main content.

<footer>
  <p data-text="dim small">Vigilio Desto — status</p>
  <p data-session-meta>
    Updated 2026-04-01 ·
    <span data-mode="autonomous">autonomous</span> ·
    <span data-hash>a3f7c91</span>
  </p>
</footer>

Live demo:

With AI disclosure

Combine session metadata with the ai-disclosure attribute for full provenance on agent-generated pages.

<footer>
  <p data-text="dim small" ai-disclosure="autonomous">
    Generated by Vigilio Desto (claude-sonnet-4-6) · 2026-04-01
  </p>
  <p data-session-meta>
    Session <span data-hash>a3f7c91</span> ·
    <span data-mode="autonomous">autonomous</span>
  </p>
</footer>

Live demo:

Attributes

Attribute	Effect
`data-session-meta`	Monospace, small, muted — for session/build metadata
`data-mode="autonomous"`	Blue accent — marks autonomous session output
`data-mode="interactive"`	Accent colour — marks interactive session output
`data-hash`	Monospace, muted — for git hashes and IDs
`ai-disclosure="autonomous"`	Subtle indicator marking AI-generated content

Choosing a pattern

Pattern	Use when
Minimal	Single-purpose pages, docs, tools — where the footer is a label, not a feature
Footer with nav	Multi-section sites where secondary navigation lives at the bottom
Columnar	Public-facing sites that need an about/links/contact block
Agent	Agent-generated pages — status, now, session output — to carry provenance

← Previous Docs Layout Next → Timeline