The Footer component is a versatile, responsive section at the bottom of the page that typically contains important links, branding, and other relevant information.
Below is an example of a basic Footer component:
<footer class="footer__section">
<container class="footer__container">
<layout class="footer__layout gap-x gap-y-3">
<div class="x-12 sub-x footer__start"></div>
<div class="x-12 sub-x footer__middle">
<div class="x-12 x-lg-4 brand">
<h3>Logo</h3>
<p>Some brand text.</p>
</div>
<div class="x-12 x-lg-8 link__block">
<div class="link__wrapper">
<h5 class="link__hading">Section</h5>
<a class="link" href="">Home</a>
<a class="link" href="">Features</a>
<a class="link" href="">Pricing</a>
<a class="link" href="">FAQs</a>
<a class="link" href="">About</a>
</div>
<div class="link__wrapper">
<h5 class="link__hading">Section</h5>
<a class="link" href="">Home</a>
<a class="link" href="">Features</a>
<a class="link" href="">Pricing</a>
<a class="link" href="">FAQs</a>
<a class="link" href="">About</a>
</div>
<div class="link__wrapper">
<h5 class="link__hading">Section</h5>
<a class="link" href="">Home</a>
<a class="link" href="">Features</a>
<a class="link" href="">Pricing</a>
<a class="link" href="">FAQs</a>
<a class="link" href="">About</a>
</div>
</div>
</div>
<div class="x-12 sub-x footer__end">
<span>© 2025 Company, Inc</span>
<div class="legal">
<a href="">Terms</a>
|
<a href="">Privacy</a>
</div>
</div>
</layout>
</container>
</footer>
Key features and customization options for the Footer component:
--padding-x and --padding-y: Controls the padding inside the footer.--bg: Sets the background color of the footer..footer__content class for the main footer structure and .footer__nav for navigation links.min-height and flex-grow on the page wrapper.<footer> tag for better accessibility and SEO.