Navigation footernavigationlayout
Glass Footer
Elegant bottom section with multi-column links and glass effect.
Preview
Usage
Copy the full block below to use this component with its imports.
astro
---
import { GlassFooter } from 'astro-component-kit';
---
<SimpleFooterGlass>Content</SimpleFooterGlass>Manual Installation
If you are not using the npm package, create a new file src/components/lib/GlassFooter.astro and paste the following code:
astro
---
---
<footer class="glass-foot">
<div class="foot-grid">
<div class="foot-brand">Astro Components<p>Premium components for the next web.</p></div>
<div class="foot-links">
<div><h5>Project</h5><a href="#">Github</a><a href="#">License</a></div>
<div><h5>Support</h5><a href="#">Issues</a><a href="#">Discord</a></div>
</div>
</div>
</footer>
<style>
.glass-foot { background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 4rem 1.5rem; }
.foot-grid { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3rem; }
.foot-brand { font-weight: 800; font-size: 1.5rem; color: #fff; }
.foot-brand p { font-size: 0.9rem; color: #64748b; font-weight: 400; margin-top: 0.5rem; max-width: 250px; }
.foot-links { display: flex; gap: 4rem; }
h5 { color: #fff; font-size: 0.85rem; margin-bottom: 1.25rem; }
a { display: block; text-decoration: none; color: #64748b; margin-bottom: 0.6rem; font-size: 0.85rem; }
a:hover { color: #818cf8; }
</style>Quick Info
- Category
- Navigation
- Filename
GlassFooter.astro- Dependencies
- None — pure Astro + CSS
- Tags
- footernavigationlayout