Footer
Site footer with copyright, optional site name, and optional link list (role="contentinfo")
Same BEM classes and behavior as Astro, Svelte, and React.
Add this component
The command below includes <strong>Footer</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
pnpm dlx rizzo-css add Footer
bunx rizzo-css add Footer
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Footer from '../components/astro/Footer.astro';
---
<Footer
siteName="My App"
year={new Date().getFullYear()}
links={[{ href: '/docs', label: 'Docs' }, { href: '/privacy', label: 'Privacy' }]}
/>
<!-- Rizzo CSS. No script needed. -->
<footer class="footer" role="contentinfo">
<p class="footer__copy">© 2025 My App. All rights reserved.</p>
<nav class="footer__links" aria-label="Footer links">
<a href="/docs">Docs</a>
<a href="/privacy">Privacy</a>
</nav>
</footer>
<script>
import { Footer } from '$lib/rizzo';
</script>
<Footer
siteName="My App"
year={new Date().getFullYear()}
links={[{ href: '/docs', label: 'Docs' }, { href: '/privacy', label: 'Privacy' }]}
/>
<script setup>
import Footer from '@/components/rizzo/Footer.vue';
</script>
<template>
<Footer
site-name="My App"
:year="new Date().getFullYear()"
:links="[
{ href: '/docs', label: 'Docs' },
{ href: '/privacy', label: 'Privacy' },
]"
/>
</template>
import { Footer } from './components/react';
<Footer
siteName="My App"
year={new Date().getFullYear()}
links={[
{ href: '/docs', label: 'Docs' },
{ href: '/privacy', label: 'Privacy' },
]}
/>
Other frameworks: Astro · Vanilla · Svelte · React
npm 
pnpm 
yarn 
bun