Layout layoutfooterpersonal
Bottom Brand Footer
Extremely simple centered footer for portfolio or personal sites.
Preview
© 2026 Built with Astro Components Kit.
Usage
Copy the full block below to use this component with its imports.
astro
---
import { BottomBrandFooter } from 'astro-component-kit';
---
<FooterCenteredMinimal>Content</FooterCenteredMinimal>Manual Installation
If you are not using the npm package, create a new file src/components/lib/BottomBrandFooter.astro and paste the following code:
astro
---
---
<footer class="c-footer">
<div class="c-logo">Astro Components</div>
<div class="c-copy">© 2024 Built with ❤️ and Astro.</div>
</footer>
<style>
.c-footer { text-align: center; padding: 4rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.c-logo { font-weight: 800; color: #fff; font-size: 1.1rem; margin-bottom: 0.5rem; letter-spacing: 0.05em; }
.c-copy { font-size: 0.8rem; color: #64748b; }
</style>Quick Info
- Category
- Layout
- Filename
BottomBrandFooter.astro- Dependencies
- None — pure Astro + CSS
- Tags
- layoutfooterpersonal