Footer · Visualist Design System

Usage

Import the component and render it.

import { Footer } from 'src/components/Footer/Footer';

<Footer
  variant="standard"
  logo="/docs/visualist-logo.png"
  logoAlt="Visualist home"
  description="Independent tools for thoughtful teams building a more considered digital world."
  groups={[{"heading":"Product","links":[{"label":"Overview","href":"#"},{"label":"Workflow","href":"#"},{"label":"Integrations","href":"#"},{"label":"Pricing","href":"#"}]},{"heading":"Company","links":[{"label":"About","href":"#"},{"label":"Journal","href":"#"},{"label":"Careers","href":"#"},{"label":"Contact","href":"#"}]},{"heading":"Resources","links":[{"label":"Help center","href":"#"},{"label":"Guides","href":"#"},{"label":"System status","href":"#"},{"label":"Developers","href":"#"}]},{"heading":"Follow","links":[{"label":"LinkedIn","href":"#"},{"label":"Instagram","href":"#"},{"label":"Are.na","href":"#"},{"label":"Newsletter","href":"#"}]}]}
  links={[{"label":"Product","href":"#"},{"label":"Company","href":"#"},{"label":"Resources","href":"#"},{"label":"Contact","href":"#"}]}
  legalLinks={[{"label":"Privacy","href":"#"},{"label":"Terms","href":"#"},{"label":"Accessibility","href":"#"},{"label":"Cookies","href":"#"}]}
  copyright="2026 Visualist. All rights reserved."
  newsletterEyebrow="NOTES FROM THE STUDIO"
  newsletterHeading="A thoughtful edit, once a month."
  newsletterDescription="Practical ideas on digital craft, calm collaboration, and the work behind better products."
  emailLabel="Email address"
  emailPlaceholder="you@company.com"
  subscribeLabel="Subscribe"
  consent="By subscribing, you agree to our Privacy Policy. Unsubscribe any time."
/>

Accessibility

Role: footer landmark; the links are a navigation landmark ("Footer"); the subscribe band is a region named by its heading.

Key	Action
`Tab`	Moves through the logo, the links, the form and the legal links
`Enter (in the email field)`	Submits the form

The email field is required and of type email, labelled by "Email address".
Column headings are real headings, so each group of links is named.
The © icon is announced as "Copyright".

Variant

Set the variant prop: Newsletter is "newsletter", Standard is "standard", Simple is "simple".

Newsletter

Standard

Simple

<Footer variant="newsletter" />
<Footer variant="standard" />
<Footer variant="simple" />

Composition

Use the following composition to build a Footer:

Footer
├── FooterLink
├── Separator
├── TextLink
├── Input
└── Button

FooterLink

A link of the Footer’s navigation. Only used inside Footer.

FooterLink

<FooterLink label="Overview" href="#" />

Actions

Pass callbacks to respond to the component.

import { Footer } from 'src/components/Footer/Footer';

<Footer
  variant="standard"
  logo="/docs/visualist-logo.png"
  logoAlt="Visualist home"
  description="Independent tools for thoughtful teams building a more considered digital world."
  groups={[{"heading":"Product","links":[{"label":"Overview","href":"#"},{"label":"Workflow","href":"#"},{"label":"Integrations","href":"#"},{"label":"Pricing","href":"#"}]},{"heading":"Company","links":[{"label":"About","href":"#"},{"label":"Journal","href":"#"},{"label":"Careers","href":"#"},{"label":"Contact","href":"#"}]},{"heading":"Resources","links":[{"label":"Help center","href":"#"},{"label":"Guides","href":"#"},{"label":"System status","href":"#"},{"label":"Developers","href":"#"}]},{"heading":"Follow","links":[{"label":"LinkedIn","href":"#"},{"label":"Instagram","href":"#"},{"label":"Are.na","href":"#"},{"label":"Newsletter","href":"#"}]}]}
  links={[{"label":"Product","href":"#"},{"label":"Company","href":"#"},{"label":"Resources","href":"#"},{"label":"Contact","href":"#"}]}
  legalLinks={[{"label":"Privacy","href":"#"},{"label":"Terms","href":"#"},{"label":"Accessibility","href":"#"},{"label":"Cookies","href":"#"}]}
  copyright="2026 Visualist. All rights reserved."
  newsletterEyebrow="NOTES FROM THE STUDIO"
  newsletterHeading="A thoughtful edit, once a month."
  newsletterDescription="Practical ideas on digital craft, calm collaboration, and the work behind better products."
  emailLabel="Email address"
  emailPlaceholder="you@company.com"
  subscribeLabel="Subscribe"
  consent="By subscribing, you agree to our Privacy Policy. Unsubscribe any time."
  onSubscribe={(email) => console.log(email)}
/>

Callback	When
`onSubscribe`	Called with the email when the form is submitted (the page does not reload).