Zoeken...  ⌘K GitHub

FooterMinimal Footer

Strakke één-rij footer: logo links, links in het midden, copyright rechts.

/footer-minimal
src/components/footer/FooterMinimal.astro
---
/**
 * FooterMinimal — strakke één-rij footer: logo links, links in het midden,
 * copyright rechts. Lichte achtergrond.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - links?: { label: string; href: string }[]
 * - copyright?: string         (default: "© {jaar}")
 */
interface Props {
  logo?: string;
  logoHref?: string;
  links?: { label: string; href: string }[];
  copyright?: string;
}

const {
  logo = 'Merk',
  logoHref = '/',
  links = [
    { label: 'Privacy', href: '#' },
    { label: 'Voorwaarden', href: '#' },
    { label: 'Contact', href: '#' },
  ],
  copyright,
} = Astro.props;

const year = new Date().getFullYear();
const copyrightText = copyright ?? `© ${year}`;
---

<footer class="bl-section fmin">
  <div class="bl-inner fmin-inner">
    <a href={logoHref} class="fmin-logo">{logo}</a>
    {links.length > 0 && (
      <nav class="fmin-links">
        {links.map(l => <a href={l.href} class="fmin-link">{l.label}</a>)}
      </nav>
    )}
    <p class="fmin-copy">{copyrightText}</p>
  </div>
</footer>

<style>
.fmin{background:#fff;border-top:1px solid #e5e7eb;padding-block:0}
.fmin-inner{padding-block:1.25rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.fmin-logo{font-weight:800;font-size:.9375rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.02em}
.fmin-links{display:flex;gap:1.5rem;flex:1;flex-wrap:wrap}
.fmin-link{font-size:.8125rem;color:#6b7280;text-decoration:none;transition:color .15s}
.fmin-link:hover{color:#0a0a0a}
.fmin-copy{font-size:.8125rem;color:#6b7280;margin:0;white-space:nowrap}
</style>

Props

Prop Type Default Beschrijving
logo string 'Merk' Merknaam
logoHref string '/' Link van het logo
links { label; href }[] - Footer links
copyright string '© {jaar}' Copyright-regel

* = verplicht