Footer — `.mv-footer`

Editorial site footer: numbered mono column headings on hairlines, brand + newsletter, a row of contact tiles and a full-width bottom strip; a statement version with a large headline and calls to action; or a minimal one-line version.

Category	Blocks
Type	Block (ready-made section) (`.mv-footer`)
Status	stable
Also installs	badge, button, input
Keywords	footer, links, newsletter, socials, sitemap, contact, landing

When to use

A site needs an editorial footer with numbered link columns, a newsletter and contact tiles
The page should end on a large statement headline with calls to action above the links
A small product site only needs logo, links and copyright on one line

Install

node scripts/add.mjs footer --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["footer"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, components/footer/footer.css, components/badge/badge.css, components/button/button.css, components/input/input.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<mv-tabs id="footer-demo" value="columns" data-size="sm" style="gap:0;background:var(--mv-bg-subtle)">
  <style>
    #footer-demo > [role="tablist"] { justify-self: center; margin: .75rem auto; }
  </style>
  <div role="tablist" aria-label="Block variant">
    <button role="tab" data-value="columns">Columns</button>
    <button role="tab" data-value="statement">Statement</button>
    <button role="tab" data-value="minimal">Minimal</button>
  </div>

  <!-- ═════════ Columns ═════════ -->
  <div role="tabpanel" data-value="columns">
    <footer class="mv-footer">
      <div class="mv-footer-inner">
        <div class="mv-footer-top">
          <div class="mv-footer-brand">
            <a class="mv-footer-logo" href="#footer-demo"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="1.5" y="1.5" width="29" height="29" rx="7" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M9 23 22 10" stroke="var(--mv-accent)" stroke-width="3" stroke-linecap="round"/><path d="M9 23h8" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Quillwork</a>
            <p class="mv-footer-tagline">Documentation that lives next to your code and notices when it drifts. Write, review and publish in one place.</p>
            <form class="mv-footer-newsletter" onsubmit="event.preventDefault(); this.querySelector('small').textContent = 'Subscribed. The next issue goes out on the first Monday of the month.'">
              <label for="ft-email">The Docs Letter · monthly</label>
              <div class="mv-footer-newsletter-row">
                <input class="mv-input" id="ft-email" type="email" placeholder="[email protected]" autocomplete="email" required>
                <button class="mv-button" type="submit">Subscribe</button>
              </div>
              <small aria-live="polite">One email a month on writing docs developers read.</small>
            </form>
          </div>
          <nav class="mv-footer-nav" aria-label="Footer">
            <div>
              <h2 class="mv-footer-heading" id="ft-col-0">Product</h2>
              <ul class="mv-footer-links" aria-labelledby="ft-col-0">
                <li><a href="#footer-demo">Editor</a></li>
                <li><a href="#footer-demo">Review</a></li>
                <li><a href="#footer-demo">Search</a></li>
                <li><a href="#footer-demo">Publishing</a></li>
                <li><a href="#footer-demo">Integrations</a></li>
                <li><a href="#footer-demo">Changelog <span class="mv-badge" data-variant="secondary" data-size="sm">4.2</span></a></li>
              </ul>
            </div>
            <div>
              <h2 class="mv-footer-heading" id="ft-col-1">Developers</h2>
              <ul class="mv-footer-links" aria-labelledby="ft-col-1">
                <li><a href="#footer-demo">API reference</a></li>
                <li><a href="#footer-demo">CLI</a></li>
                <li><a href="https://github.com/" data-external target="_blank" rel="noopener">GitHub</a></li>
                <li><a href="#footer-demo">Status page</a></li>
                <li><a href="#footer-demo">Self-hosting</a></li>
              </ul>
            </div>
            <div>
              <h2 class="mv-footer-heading" id="ft-col-2">Company</h2>
              <ul class="mv-footer-links" aria-labelledby="ft-col-2">
                <li><a href="#footer-demo">About</a></li>
                <li><a href="#footer-demo">Careers <span class="mv-badge" data-variant="info" data-size="sm">3 open</span></a></li>
                <li><a href="#footer-demo">Customers</a></li>
                <li><a href="#footer-demo">Press kit</a></li>
                <li><a href="#footer-demo">Contact</a></li>
              </ul>
            </div>
            <div>
              <h2 class="mv-footer-heading" id="ft-col-3">Legal</h2>
              <ul class="mv-footer-links" aria-labelledby="ft-col-3">
                <li><a href="#footer-demo">Terms</a></li>
                <li><a href="#footer-demo">Privacy</a></li>
                <li><a href="#footer-demo">Security</a></li>
                <li><a href="#footer-demo">Subprocessors</a></li>
                <li><a href="#footer-demo">DPA</a></li>
              </ul>
            </div>
          </nav>
        </div>
        <ul class="mv-footer-contacts" aria-label="Contact">
          <li><a class="mv-footer-contact" href="#footer-demo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z"/><path d="M4 19V5M9 7h6"/></svg><small>Help center</small><strong>312 articles</strong></a></li>
          <li><a class="mv-footer-contact" href="#footer-demo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg><small>Support</small><strong>[email protected]</strong></a></li>
          <li><a class="mv-footer-contact" href="#footer-demo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16v11H9l-5 4z"/><path d="M8 9h8M8 12h5"/></svg><small>Community</small><strong>4,800 writers on the forum</strong></a></li>
          <li class="mv-footer-contact" style="grid-template-columns:1fr">
            <small>Follow along</small>
            <ul class="mv-footer-socials" aria-label="Social media">
            <li><a href="#footer-demo" aria-label="Quillwork on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.6c.6-1 1.9-1.9 3.8-1.9 3.4 0 3.9 2.2 3.9 5.1v6.2h-4v-5.4c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.5h-4z"/></svg></a></li>
            <li><a href="#footer-demo" aria-label="Quillwork on GitHub"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4-1.3-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1.1 2.9.8.1-.6.3-1.1.6-1.3-2.2-.3-4.6-1.1-4.6-5a3.9 3.9 0 0 1 1-2.7c-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.8 1a9.6 9.6 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .6 1.4.2 2.4.1 2.7a3.9 3.9 0 0 1 1 2.7c0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9V21c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/></svg></a></li>
            <li><a href="#footer-demo" aria-label="Quillwork on X"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.8 3h3.1l-6.8 7.7 8 10.3h-6.3l-4.9-6.4L5.3 21H2.2l7.3-8.3L1.9 3h6.4l4.4 5.9zm-1.1 16.2h1.7L7.4 4.7H5.6z"/></svg></a></li>
            <li><a href="#footer-demo" aria-label="Quillwork on YouTube"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.7 15.1V8.9L15.5 12z"/></svg></a></li>
            </ul>
          </li>
        </ul>
      </div>
    <div class="mv-footer-bottom">
      <p class="mv-footer-copy">© 2026 Quillwork Labs GmbH · Berlin</p>
      <ul class="mv-footer-legal" aria-label="Legal">
        <li><a href="#footer-demo">Imprint</a></li>
        <li><a href="#footer-demo">Cookie settings</a></li>
        <li><a href="#footer-demo">Accessibility</a></li>
      </ul>
      <a class="mv-footer-totop" href="#footer-demo">↑ Back to top</a>
    </div>
    </footer>
  </div>

  <!-- ═════════ Statement ═════════ -->
  <div role="tabpanel" data-value="statement">
    <footer class="mv-footer" data-variant="statement">
      <div class="mv-footer-inner">
        <div class="mv-footer-statement">
          <span class="mv-badge" data-variant="outline">Free for teams up to 5</span>
          <h2 class="mv-footer-headline">Docs your team keeps up to date. <em>Finally.</em></h2>
          <div class="mv-footer-actions">
            <a class="mv-button" href="#footer-demo">Start writing</a>
            <a class="mv-button" data-variant="outline" href="#footer-demo">Talk to us</a>
          </div>
        </div>
        <div class="mv-footer-top">
          <div class="mv-footer-brand">
            <a class="mv-footer-logo" href="#footer-demo"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="1.5" y="1.5" width="29" height="29" rx="7" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M9 23 22 10" stroke="var(--mv-accent)" stroke-width="3" stroke-linecap="round"/><path d="M9 23h8" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Quillwork</a>
            <p class="mv-footer-tagline">Made in Berlin and Lisbon by a team of 34.</p>
            <ul class="mv-footer-socials" aria-label="Social media">
            <li><a href="#footer-demo" aria-label="Quillwork on LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.6c.6-1 1.9-1.9 3.8-1.9 3.4 0 3.9 2.2 3.9 5.1v6.2h-4v-5.4c0-1.4 0-3-1.9-3s-2.1 1.4-2.1 2.9v5.5h-4z"/></svg></a></li>
            <li><a href="#footer-demo" aria-label="Quillwork on GitHub"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4-1.3-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1.1 2.9.8.1-.6.3-1.1.6-1.3-2.2-.3-4.6-1.1-4.6-5a3.9 3.9 0 0 1 1-2.7c-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.8 1a9.6 9.6 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .6 1.4.2 2.4.1 2.7a3.9 3.9 0 0 1 1 2.7c0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9V21c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/></svg></a></li>
            <li><a href="#footer-demo" aria-label="Quillwork on X"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.8 3h3.1l-6.8 7.7 8 10.3h-6.3l-4.9-6.4L5.3 21H2.2l7.3-8.3L1.9 3h6.4l4.4 5.9zm-1.1 16.2h1.7L7.4 4.7H5.6z"/></svg></a></li>
            <li><a href="#footer-demo" aria-label="Quillwork on YouTube"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.7 15.1V8.9L15.5 12z"/></svg></a></li>
            </ul>
          </div>
          <nav class="mv-footer-nav" aria-label="Footer (statement)">
            <div>
              <h2 class="mv-footer-heading" id="fs-col-0">Product</h2>
              <ul class="mv-footer-links" aria-labelledby="fs-col-0">
                <li><a href="#footer-demo">Editor</a></li>
                <li><a href="#footer-demo">Review</a></li>
                <li><a href="#footer-demo">Search</a></li>
                <li><a href="#footer-demo">Publishing</a></li>
                <li><a href="#footer-demo">Integrations</a></li>
                <li><a href="#footer-demo">Changelog <span class="mv-badge" data-variant="secondary" data-size="sm">4.2</span></a></li>
              </ul>
            </div>
            <div>
              <h2 class="mv-footer-heading" id="fs-col-1">Developers</h2>
              <ul class="mv-footer-links" aria-labelledby="fs-col-1">
                <li><a href="#footer-demo">API reference</a></li>
                <li><a href="#footer-demo">CLI</a></li>
                <li><a href="https://github.com/" data-external target="_blank" rel="noopener">GitHub</a></li>
                <li><a href="#footer-demo">Status page</a></li>
                <li><a href="#footer-demo">Self-hosting</a></li>
              </ul>
            </div>
            <div>
              <h2 class="mv-footer-heading" id="fs-col-2">Company</h2>
              <ul class="mv-footer-links" aria-labelledby="fs-col-2">
                <li><a href="#footer-demo">About</a></li>
                <li><a href="#footer-demo">Careers <span class="mv-badge" data-variant="info" data-size="sm">3 open</span></a></li>
                <li><a href="#footer-demo">Customers</a></li>
                <li><a href="#footer-demo">Press kit</a></li>
                <li><a href="#footer-demo">Contact</a></li>
              </ul>
            </div>
            <div>
              <h2 class="mv-footer-heading" id="fs-col-3">Legal</h2>
              <ul class="mv-footer-links" aria-labelledby="fs-col-3">
                <li><a href="#footer-demo">Terms</a></li>
                <li><a href="#footer-demo">Privacy</a></li>
                <li><a href="#footer-demo">Security</a></li>
                <li><a href="#footer-demo">Subprocessors</a></li>
                <li><a href="#footer-demo">DPA</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    <div class="mv-footer-bottom">
      <p class="mv-footer-copy">© 2026 Quillwork Labs GmbH · Berlin</p>
      <ul class="mv-footer-legal" aria-label="Legal">
        <li><a href="#footer-demo">Imprint</a></li>
        <li><a href="#footer-demo">Cookie settings</a></li>
        <li><a href="#footer-demo">Accessibility</a></li>
      </ul>
      <a class="mv-footer-totop" href="#footer-demo">↑ Back to top</a>
    </div>
    </footer>
  </div>

  <!-- ═════════ Minimal ═════════ -->
  <div role="tabpanel" data-value="minimal">
    <footer class="mv-footer" data-variant="minimal" style="margin-top:8rem">
      <div class="mv-footer-inner">
        <a class="mv-footer-logo" href="#footer-demo"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="1.5" y="1.5" width="29" height="29" rx="7" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M9 23 22 10" stroke="var(--mv-accent)" stroke-width="3" stroke-linecap="round"/><path d="M9 23h8" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Quillwork</a>
        <nav aria-label="Footer (minimal)">
          <ul class="mv-footer-links">
            <li><a href="#footer-demo">Pricing</a></li>
            <li><a href="#footer-demo">Changelog</a></li>
            <li><a href="#footer-demo">Docs</a></li>
            <li><a href="#footer-demo">Privacy</a></li>
            <li><a href="#footer-demo">Terms</a></li>
          </ul>
        </nav>
        <p class="mv-footer-copy">© 2026 Quillwork Labs</p>
      </div>
    </footer>
  </div>
</mv-tabs>

API

Attributes

Name	Type	Default	Description
`data-variant`	statement \| minimal	`(columns)`	statement: .mv-footer-statement (badge, .mv-footer-headline, .mv-footer-actions) above a narrower brand column; minimal: logo, links and copyright on one line.

Content structure

Name	Description
`.mv-footer-top`	-brand (-logo, -tagline, -newsletter, -socials) + nav.mv-footer-nav; side by side from 56rem.
`nav.mv-footer-nav`	Columns (2 → --mv-footer-columns from 40rem): .mv-footer-heading (numbered 01, 02… in mono) + ul.mv-footer-links; badges allowed inside links; external links (http… or data-external) get a ↗.
`ul.mv-footer-contacts`	Row of contact tiles split by hairlines: li > a.mv-footer-contact (`<svg>`, `<small>` label, `<strong>` value); a tile can also hold .mv-footer-socials.
`.mv-footer-statement`	Statement variant: badge, h2.mv-footer-headline (`<em>` dims a phrase), .mv-footer-actions.
`.mv-footer-bottom`	Copyright (.mv-footer-copy, mono), ul.mv-footer-legal, .mv-footer-totop link. Inside -inner: a ruled row; as a direct child of .mv-footer: a full-width tinted strip.

CSS classes

Name	Description
`mv-footer`	Root (on `<footer>`), mv-footer query container.
`mv-footer-newsletter / -newsletter-row`	Field + button form with a mono label and a hint (aria-live).

CSS variables

Name	Default	Description
`--mv-footer-columns`	`4`	Link columns.
`--mv-footer-max`	`72rem`	Max width.
`--mv-footer-bg`	`var(--mv-bg)`	Background.

Accessibility

<footer> landmark; the link navigation is labeled and each list is tied to its heading (aria-labelledby). Heading numbers are generated with empty alternative text. Social icons and the contact list have explicit labels; external links open with rel="noopener". The newsletter field is labeled and its feedback is announced (aria-live).