footer

Source

framework/global/scss/layouts/_footer.scss
framework/brand/nerdworks/scss/layouts/_footer.scss
framework/brand/saber66/scss/layouts/_footer.scss
framework/theme/saberco/scss/layouts/_footer.scss

Block class name .footer Edit in wp-admin

Example markup

Prompt

Operator-authored guidance for the camcom-design skill — when to use this block, composition rules, brand-variation notes. Saves on blur.

The page footer. CTA strip at the top, then a 5-column grid body (3 cols of link lists + 2 cols of brand promo), then a full-width legal line at the bottom. Always present on every page.

Grid template-areas reflow on mobile to put brand promo first, then links, then legal — the promo-first mobile order is a deliberate readability choice.

The columns area is typically 3 nested columns of nav lists generated from WP menus. The promo area is the brand wordmark + a short tagline. The legal line is one row for copyright + jurisdiction + payment-method icons.

## Production example

Footer with CTA strip, 3-column links, brand promo, legal line:

```html
<footer class="footer">

<div class="footer__cta">
        <div class="footer__cta__inner">
            <p>Free UK delivery over £50 · 7-day no-questions returns · Secure checkout</p>
        </div>
    </div>

<ul class="footer__columns__list">
                <li><h4 class="title title__quaternary">Shop</h4></li>
                <li><a href="/shop/sealed-product/">Sealed Product</a></li>
                <li><a href="/shop/singles/">Singles</a></li>
                <li><a href="/shop/accessories/">Accessories</a></li>
            </ul>

<ul class="footer__columns__list">
                <li><h4 class="title title__quaternary">Help</h4></li>
                <li><a href="/shipping/">Shipping</a></li>
                <li><a href="/returns/">Returns</a></li>
                <li><a href="/contact/">Contact</a></li>
            </ul>

<ul class="footer__columns__list">
                <li><h4 class="title title__quaternary">About</h4></li>
                <li><a href="/about/">Our story</a></li>
                <li><a href="/events/">Events</a></li>
                <li><a href="/community/">Community</a></li>
            </ul>

</div>

<div class="footer__promo">
            <div class="footer__promo__logo">
                <img src="/uploads/2024/nerdworks-wordmark.svg" alt="Nerdworks"/>
            </div>
            <p>Specialist trading-card retail, since 2011.</p>
        </div>

<div class="footer__legal">
            <p>© 2026 Nerdworks Ltd · Company no. 06743821 · Registered in England &amp; Wales</p>
        </div>

</div>

</footer>
```

Legacy fields (tier, composition role, layout pattern, repeaters)

Pre-MC-plan-#64 schema. Data preserved here for reference. Collapsed into example markup + prompt opportunistically as we walk sections.

Composition role Layout pattern

Purpose Composes with

Elements observed

Modifiers observed

States

Non-canonical elements

Notes

Hidden in print media query — page footer doesn't print.
Grid template-areas reflow on mobile (below 768px): `__promo` moves to the top, then `__columns`, then `__legal` — promo-first reading order on mobile.
The `__columns__list` slot is a `<ul>` of nav links — each list typically headed by a `.title` element with a 0 bottom-margin override at mobile.
The `__columns__cta` slot (mentioned in the SCSS as `grid-column: 1 / -1`) is a full-width row that can sit beneath the three link columns — used for a footer-wide newsletter signup or a "Need help? Contact us" CTA.
The `__promo__logo` carries an `<img>` constrained to max-width 300px — typically the wider brand wordmark.

Source

Prompt

AI-Assist