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.