Skip to content
Site volume
Colourway

Components

Footer

The page end on the slab: the map of the mark, studio links, the display settings, legal and the build stamp.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/footer
On this page

Example#

Look of this example

Usage#

Every page ends with the footer: the site map as the map of the mark, the studio links, the visitor controls, the legal line and the build stamp. It prints on the slab by default.

  • map is up to four columns; each starts with a 24 px mark with its lit lines inked and the rest as outlines, then the title and the links.
  • controls default to VisitorControls (theme, volume, sound, D-B12); pass null to leave them out.
  • buildStamp prints "Build a1b2c3d · 23 Oct 2026, Toronto", or "Build local" with no commit.
  • aside holds a website extra, such as the MAX//OS wood block.

Anatomy#

Volume#

Reading layer: identical at every volume. The volume dial in its controls changes the rest of the page.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Column titles are the site's sections, in the order of the navbar.
  • The legal line is literal: the company name, the year and the policies.
  • One joke is allowed in the legal line's neighbourhood, never inside it.

Do and don't#

Do

The map of the site, in four columns.

Don't

A footer that repeats every page of the site in nine columns.

A link farm.

A footer helps people who reached the bottom find the next step. A wall of links hides the few that matter.

Accessibility#

  • It is the contentinfo landmark; links are real links with a visible underline.
  • Each column's mark is decorative; the column title says what it holds.
  • The build stamp is literal: "Build a1b2c3d · 23 Oct 2026, Toronto".

Props#

PropTypeDefaultDescription
map requiredreadonly FooterColumn[]none
studioreadonly FooterLink[]noneStudio links (About, Contact …) in their own row.
asideReactNodenoneWebsite content beside the map (the MAX//OS block, the self-test dare card).
legalReactNodenone
controlsReactNode<VisitorControls />Default `<VisitorControls />` (D-B12); `null` removes them.
buildStamp{ sha?: string; date: Date | string; timeZone?: string; }none
plate"slab" | "stock" | "white"slabDefault `slab` (N17).

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from FooterProps in packages/overprint-react/src/reading/footer/footer.tsx.

Tokens#

System tokens (15)

Scanned from its CSS at build and checked against its registry entry; 8 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry