151Footer
Link columns over a mono bottom bar, one hairline on top. Column heads speak the kicker voice; --slim keeps only the bar for app screens; --dark closes a navy page.
Use it for
- The site footer — columns for product, learn, company
- App screens — the slim bar alone
Not for
- A CTA — that is CTA band, directly above the footer
Default
markup
<footer class="ns-footer" style="inline-size:100%">
<div class="ns-footer__grid">
<div class="ns-footer__col"><p class="ns-footer__head">Learn</p><ul><li><a href="#">Courses</a></li><li><a href="#">Training roadmap</a></li><li><a href="#">Docs</a></li></ul></div>
<div class="ns-footer__col"><p class="ns-footer__head">Content</p><ul><li><a href="#">Blog</a></li><li><a href="#">YouTube</a></li><li><a href="#">Newsletter</a></li></ul></div>
<div class="ns-footer__col"><p class="ns-footer__head">Project</p><ul><li><a href="#">GitHub</a></li><li><a href="#">Design system</a></li><li><a href="#">License</a></li></ul></div>
</div>
<div class="ns-footer__bar"><span>© 2026 Namaste Salesforce</span><span class="ns-footer__spacer"></span><a href="#">Privacy</a><a href="#">Terms</a></div>
</footer>Slim
The bar alone — app screens where the page owns the space.
markup
<footer class="ns-footer" style="inline-size:100%">
<div class="ns-footer__bar"><span>© 2026 Namaste Salesforce</span><span class="ns-footer__spacer"></span><a href="#">Privacy</a><a href="#">Terms</a></div>
</footer>Accessibility contract
- A