Layout layoutfootergrid
Modern Footer Layout
Multi-column grid footer for project links and brand info.
Preview
Component preview not available for: minimal-footer-grid
Ensure the filename matches MinimalFooterGrid.astro
Usage
Copy the full block below to use this component with its imports.
astro
---
import { ModernFooterLayout } from 'astro-component-kit';
---
<MinimalFooterGrid>Content</MinimalFooterGrid>Manual Installation
If you are not using the npm package, create a new file src/components/lib/ModernFooterLayout.astro and paste the following code:
astro
---
---
<footer class="m-footer">
<div class="f-row">
<div class="f-info">Logo<span>© 2024</span></div>
<div class="f-links">
<div><a>Docs</a><a>Blog</a></div>
<div><a>Twitter</a><a>Discord</a></div>
</div>
</div>
</footer>
<style>
.m-footer { padding: 4rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.f-row { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; }
.f-info { font-weight: 800; color: #fff; }
span { display: block; font-size: 0.75rem; color: #64748b; font-weight: 400; }
.f-links { display: flex; gap: 3rem; }
a { display: block; color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.5rem; text-decoration: none; cursor: pointer; }
a:hover { color: #fff; }
</style>Quick Info
- Category
- Layout
- Filename
ModernFooterLayout.astro- Dependencies
- None — pure Astro + CSS
- Tags
- layoutfootergrid