04 / Layout
Signature Footer
A complete closing section with room for the useful links first and one oversized wordmark at the end.
Install
Copy the source into your project, or keep it behind a package.
Copy the source into your project and make it yours.
Usage
export function Footer() {
return (
<SignatureFooter
eyebrow="One last useful thought"
heading="Make the ending memorable."
description="Keep the links practical. Let the wordmark do the rest."
action={<a href="/work">See our work</a>}
navigation={<nav aria-label="Footer">...</nav>}
brand={<a href="/">Northstar</a>}
meta={<span>Independent and curious.</span>}
wordmark="Northstar"
/>
)
}API
headingReactNodeThe footer's main invitation.wordmarkstringThe oversized closing brand name.eyebrowReactNodeA short label above the heading.descriptionReactNodeSupporting copy below the heading.actionReactNodeA primary link or button.navigationReactNodeProduct, company, or social links.brandReactNodeThe compact logo or home link.metaReactNodeLicense, location, or ownership details.classNamestringClasses for the footer element.Accessibility
The component uses a semantic footer and heading. Navigation, links, and labels remain yours, so their names stay specific to your site. The repeated oversized wordmark is decorative and hidden from assistive technology.