Skip to content
All Taste components

Footer

Footer — minimal one row

Logo, a handful of links and the copyright on a single line that wraps neatly on small screens.

single row · inline links · wraps on mobile

const links = [
  { label: "Pricing", href: "/pricing" },
  { label: "Help", href: "/help" },
  { label: "Privacy", href: "/privacy" },
  { label: "Terms", href: "/terms" },
  { label: "Contact", href: "/contact" },
];

export function FooterMinimal() {
  return (
    <footer className="border-t border-border bg-bg px-5 py-7 font-sans sm:px-10">
      <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-8 gap-y-4">
        <a href="/" className="inline-flex items-center gap-2 text-base font-semibold tracking-tight text-fg">
          <span className="size-6 rounded-sm bg-primary" aria-hidden />Slotwise
        </a>
        <nav aria-label="Footer">
          <ul className="flex flex-wrap gap-x-5 gap-y-2">
            {links.map((l) => (
              <li key={l.href}><a href={l.href} className="text-[13.5px] text-fg-muted transition hover:text-fg">{l.label}</a></li>
            ))}
          </ul>
        </nav>
        <p className="text-[13px] text-fg-subtle">© {new Date().getFullYear()} Slotwise</p>
      </div>
    </footer>
  );
}

The code uses the Taste Tailwind preset. Make yours on the Taste page with Export my system.