Skip to content
AstroLite

Footer

To display a Footer block, use the <Footer> component.

The Footer block is a bottom-level section that typically includes a logo, navigation links, and legal information. Use it to provide users with additional information about your website or application.

Preview

Import

src/components/example.astro
import { Footer } from 'astro-lite';

Usage

src/components/example.astro
<Footer
    logoText="AstroLite"
    logoSrc="/logo.svg"
    logoLink="/home"
    copyright="© 2025 AstroLite. All Rights Reserved."
>
    <section>
        <h4>Follow Us</h4>
        <ul>
            <li><a href="https://example.com/">Github</a></li>
            <li><a href="https://example.com/">Discord</a></li>
        </ul>
    </section>


    <section>
        <h4>Legal</h4>
        <ul>
            <li><a href="https://example.com/">Privacy Policy</a></li>
            <li><a href="https://example.com/">Terms & Conditions</a></li>
        </ul>
    </section>
</Footer>
  • logoText (optional)
  • logoSrc (optional)
  • logoLink (optional)
  • copyright (optional)
  • <slot> (required) -> Use <section> elements to organize the content.