Mark · Chrome

Footer

The site footer — brand and tagline, social icons, columns of links, and a copyright line. It is a band like any other, and takes the same surface tones every section does.

Full page preview ↗

<footer class="mk-section surface-muted">
  <div class="mk-container">
    <div class="mk-row mk-row--4up">
      <div>
        <p class="h5 fw-bold text-body-emphasis mb-2">Northwind</p>
        <p class="mb-4" style="max-width:22rem">Build a beautiful, modern website with a CMS that speaks the same language.</p>
        <ul class="list-unstyled d-flex gap-2 mb-0">
          <li>
            <a class="mk-social-link" href="#" aria-label="GitHub">
              <i class="bi bi-github"></i>
            </a>
          </li>
          <li>
            <a class="mk-social-link" href="#" aria-label="X">
              <i class="bi bi-twitter-x"></i>
            </a>
          </li>
          <li>
            <a class="mk-social-link" href="#" aria-label="LinkedIn">
              <i class="bi bi-linkedin"></i>
            </a>
          </li>
        </ul>
      </div>
      <div>
        <h2 class="mk-eyebrow text-body-tertiary mb-3">Product</h2>
        <ul class="list-unstyled mb-0">
          <li class="mb-2">
            <a class="text-decoration-none" href="#">Features</a>
          </li>
          <li class="mb-2">
            <a class="text-decoration-none" href="#">Pricing</a>
          </li>
          <li class="mb-2">
            <a class="text-decoration-none" href="#">Changelog</a>
          </li>
        </ul>
      </div>
      <div>
        <h2 class="mk-eyebrow text-body-tertiary mb-3">Company</h2>
        <ul class="list-unstyled mb-0">
          <li class="mb-2">
            <a class="text-decoration-none" href="#">About</a>
          </li>
          <li class="mb-2">
            <a class="text-decoration-none" href="#">Careers</a>
          </li>
          <li class="mb-2">
            <a class="text-decoration-none" href="#">Contact</a>
          </li>
        </ul>
      </div>
      <div>
        <h2 class="mk-eyebrow text-body-tertiary mb-3">Legal</h2>
        <ul class="list-unstyled mb-0">
          <li class="mb-2">
            <a class="text-decoration-none" href="#">Privacy</a>
          </li>
          <li class="mb-2">
            <a class="text-decoration-none" href="#">Terms</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="border-top pt-4 d-flex flex-wrap justify-content-between gap-2">
      <p class="mb-0 small">© 2026 Northwind. All rights reserved.</p>
    </div>
  </div>
</footer>

brand: Northwind
tagline: Build a beautiful, modern website with a CMS that speaks the same language.
social: [3 items]
link_columns: [3 items]
copyright: © 2026 Northwind. All rights reserved.

Fields (10)

Field	Type	Notes
`brand`	text
`tagline`	textarea
`social`	repeater
`link_columns`	repeater
`copyright`	text
`credits`	text	Sits opposite the copyright on the same line — photo credits, a build attribution, a licence note. RAW HTML, because an attribution is usually a link; a page-author slot, like `backdrop`.
`credits_site`	text	An example site's name. Renders a single `Site credits` link to /credits, which carries the photographer, the licence and the rest — the footer points, the page tells. Ignored if `credits` is set.
`container`	text	A rung on the container ladder — empty (the page measure) · inset · prose · fluid · full-bleed
`layout`	text	How the blocks divide — `even` gives the brand a column the same width as each link list; `aside` gives it a rail of its own and lets the lists share the rest.
`surface`	text	empty (page bg); muted, subtle, primary, dark; or a class like bg-body-tertiary. `dark` stays dark in both color modes.

Footer

Full footer

On this page