CSS only

Footer

The page footer: an auto-fit column grid, link navs and a bottom bar. SCSS-only — no JavaScript.

A ng-footer holds a ng-footer-grid of ng-footer-col columns (auto-fit: they wrap responsively on their own) and a closing ng-footer-bottom. Link lists go in a ng-footer-nav — stacked by default, in a row with inline.

Columns (auto-fit)

Three link columns and the copyright bar. Shrink the window: the grid reflows by itself.

footer.html

<footer class="ng-footer">
    <div class="ng-footer-grid">
        <div class="ng-footer-col">
            <h4>Product</h4>
            <div class="ng-footer-nav">
                <a href="#">Features</a>
                <a href="#">Roadmap</a>
                <a href="#">Changelog</a>
            </div>
        </div>
        <div class="ng-footer-col">
            <h4>Resources</h4>
            <div class="ng-footer-nav">
                <a href="#">Docs</a>
                <a href="#">Snippets</a>
                <a href="#">Showcase</a>
            </div>
        </div>
        <div class="ng-footer-col">
            <h4>Company</h4>
            <div class="ng-footer-nav">
                <a href="#">About</a>
                <a href="#">Team</a>
                <a href="#">Contact</a>
            </div>
        </div>
    </div>
    <div class="ng-footer-bottom">
        © 2026 Acme Corp · All rights reserved.
    </div>
</footer>

Big footer

Brand column, link columns, a newsletter signup (an Input group) and social icons in an inline nav.

footer.html

<footer class="ng-footer">
    <div class="ng-footer-grid">
        <div class="ng-footer-col">
            <h4><i class="ph-fill ph-hexagon text-purple fs-2xl mr-10"></i>ACME</h4>
            <p class="fs-sm text-mute">Token-driven CSS + JS framework with native light/dark. Built for dashboards, app shells and editorial sites.</p>
        </div>
        <div class="ng-footer-col">
            <h4>Resources</h4>
            <div class="ng-footer-nav">
                <a href="#">Docs</a>
                <a href="#">API Reference</a>
                <a href="#">Migration guide</a>
            </div>
        </div>
        <div class="ng-footer-col">
            <h4>Community</h4>
            <div class="ng-footer-nav">
                <a href="#">GitHub</a>
                <a href="#">Discord</a>
                <a href="#">Blog</a>
            </div>
        </div>
        <div class="ng-footer-col">
            <h4>Stay updated</h4>
            <p class="fs-sm text-mute mb-12">One email a month — releases and snippets.</p>
            <div class="ng-input-group">
                <input type="email" class="ng-input" placeholder="you@email.com">
                <button type="button" class="ng-btn ng-btn-primary">Join</button>
            </div>
            <div class="ng-footer-nav inline mt-16 fs-xl">
                <a href="#" aria-label="GitHub"><i class="ph ph-github-logo"></i></a>
                <a href="#" aria-label="X"><i class="ph ph-x-logo"></i></a>
                <a href="#" aria-label="Discord"><i class="ph ph-discord-logo"></i></a>
                <a href="#" aria-label="YouTube"><i class="ph ph-youtube-logo"></i></a>
            </div>
        </div>
    </div>
    <div class="ng-footer-bottom">
        © 2026 Acme Corp · All rights reserved.
        <div class="ng-footer-nav inline">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Cookies</a>
        </div>
    </div>
</footer>

Inline (app-shell)

Add inline on the footer for the single-row variant — the classic app bottom bar.

footer.html

<footer class="ng-footer inline">
    <div class="ng-footer-bottom center">
        © 2026 Acme Corp · v1.0
        <div class="ng-footer-nav inline">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Cookies</a>
        </div>
    </div>
</footer>

Bottom alignment

center / right on the ng-footer-bottom.

footer.html

<footer class="ng-footer inline">
    <div class="ng-footer-bottom right">
        © 2026 Acme Corp
    </div>
</footer>

Anatomy

ng-footer ng-footer-grid ng-footer-col ng-footer-nav ng-footer-bottom

Modifiers

inline (footer) inline (nav) center (bottom) right (bottom)

Reference

Generated from the component source (_ng_footer.scss).

Component info

Name	`Footer`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_footer.scss`

Classes

.ng-btn .ng-footer .ng-footer-bottom .ng-footer-col .ng-footer-grid .ng-footer-nav

Tokens

--ng-footer-bg --ng-footer-bottom-size --ng-footer-color --ng-footer-font-size --ng-footer-link-hover-color --ng-footer-link-hover-decoration --ng-footer-mtop --ng-footer-muted