SiteFooter

A website footer in three layouts: link columns with a newsletter signup, a single quiet row, or a closing variant that ends in a large faded wordmark of the brand name.

When to use

• The bottom of every marketing or docs page, carrying navigation, legal links, social links and a status line.
• columns for sites with many destinations; minimal for small sites and app shells.
• Not for a dedicated newsletter section: use NewsletterSignup.
• Not for an in-app status bar or toolbar.

Usage

import { SiteFooter } from "@/components/iris/blocks/site-footer/site-footer";

h(SiteFooter, {
  variant: "columns",
  brand: { name: "Iris UI", href: "/" },
  tagline: "Interface pieces for products that think out loud.",
  columns: [
    {
      title: "Library",
      links: [
        { label: "Components", href: "/components" },
        { label: "Blocks", href: "/components#blocks" },
      ],
    },
    {
      title: "Guides",
      links: [
        { label: "Brand book", href: "/brand" },
        { label: "Install", href: "/components#install" },
      ],
    },
  ],
  legal: [{ label: "License", href: "/license" }],
  socials: [{ label: "Releases", href: "/changelog", external: true }],
  newsletter: { title: "Get the release notes", onSubscribe: (email) => api.subscribe(email) },
  status: { label: "All systems normal", tone: "success", href: "/status" },
});

Props

Prop	Type	Default	Description
variant	"columns" | "minimal" | "logo"	"columns"	columns pairs a newsletter with link columns, minimal is one quiet row, logo ends in a large, faded brand.name wordmark.
brand	{ name, href?, mark? }	{ name: "Iris UI" }	Brand link, copyright name and the logo variant's wordmark. Without mark the name is set in plain type; pass mark to put a logo before it.
tagline	string	"Interface components that move with intent."	One short line under the brand.
columns	{ title, links: SiteFooterLink[] }[]	siteFooterExampleColumns (Library, Guides, Project)	Link columns. A link is { label, href?, external? }; external opens a new tab and shows an arrow.
links	SiteFooterLink[]	first link of each column plus 2 legal	Links for the minimal variant.
legal	SiteFooterLink[]	License, Credits	Small links beside the copyright.
socials	SiteFooterLink[]	Repository, Releases	Social links (text, no icons).
newsletter	{ title?, description?, placeholder?, onSubscribe? } | null	Get the release notes	Signup in the columns variant. onSubscribe rejects to show an error. null hides it.
status	{ label, tone?: "success" | "warning" | "danger", href? } | null	All systems normal	System status link with a dot. null hides it.
year	number	current year	Year in the copyright line.
onNavigate	(link) => void	none	Called for every link pressed; links without href render as buttons.
className	string	none	Extra classes on the footer.

Notes

• The default brand is "Iris UI" in plain type. The logo variant repeats brand.name as an oversized display wordmark (about 9% foreground, sitting low against the bottom edge) that rises in once when scrolled into view; keep the name short so it fits.
• logo shows no newsletter; use columns when you need the signup.
• Footer columns are a nav labelled "Footer"; legal and social lists are labelled lists.
• The newsletter validates the address, shows a sending state and a subscribed confirmation; reduced motion removes the transitions and the logo rise.
• Colours are theme tokens (page, ink, ink-2, ink-3, line, line-soft); the status dot uses green, orange or red by tone.