SiteFooter

The page's closing panel: a pitch on one side, the site's links in columns on the other, and a bar beneath for the legal line and social links. It sits on the page gutter as one rounded, sunk surface, so it reads as the end of the page rather than another section of it. Import from "@instruments/materia-ui/compositions/site-footer".

Usage

import { SiteFooter, SiteFooterBar, SiteFooterBarProps, SiteFooterColumn, SiteFooterColumnProps, SiteFooterLead, SiteFooterLeadProps, SiteFooterLegal, SiteFooterLegalProps, SiteFooterLink, SiteFooterLinkProps, SiteFooterNav, SiteFooterNavProps, SiteFooterProps, SiteFooterSocial, SiteFooterSocialLink, SiteFooterSocialLinkProps, SiteFooterSocialProps } from "@instruments/materia-ui/compositions/site-footer";

Best practices

Render it after the page's <main>, not inside it, so it stays the page's own footer landmark.
Keep it to a lead, one nav and one bar. Four columns of a few links each is the shape it is set for.

Props

SiteFooterBar

Prop	Type	Default	Description
align	`LayoutResponsiveValue<FlexAlign>`	`"stretch"`	Cross-axis alignment. Accepts a per-breakpoint responsive object.
as	`"div" \| "article" \| "aside" \| "figcaption" \| "figure" \| "footer" \| "header" \| "li" \| "main" \| "nav" \| "ol" \| "section" \| "span" \| "ul"`		Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: `as="button"` is a type error, because the design-system answer is the Button component. Event handlers and the ref accept any host element. `as` and `render` are mutually exclusive; if both are passed, `render` wins (a dev-only warning fires).
direction	`LayoutResponsiveValue<FlexDirection>`	`"row"`	Main-axis direction. Accepts a per-breakpoint responsive object.
gap	`LayoutResponsiveValue<"base" \| "none" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "3xs">`		Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.
guidelines	`boolean`	`false`	Show dashed outline guidelines during development.
inline	`boolean`	`false`	Render as inline-flex instead of flex.
justify	`LayoutResponsiveValue<FlexJustify>`	`"flex-start"`	Main-axis distribution. Accepts a per-breakpoint responsive object.
responsiveMode	`ResponsiveMode`	`"screen"`	Whether responsive values resolve against the viewport ("screen") or nearest container ("container").
wrap	`LayoutResponsiveValue<FlexWrap>`	`"nowrap"`	Wrap behaviour. Accepts a per-breakpoint responsive object.
ref	`LayoutRef \| undefined`		Ref to the rendered host, whichever element `as` selects.

SiteFooterColumn

Prop	Type	Default	Description
title(required)	`string`		The group's name, shown above its links.
children(required)	`ReactNode`		Its `SiteFooterLink`s.
ref	`LayoutRef \| undefined`		Ref to the rendered host, whichever element `as` selects.
direction	`LayoutResponsiveValue<FlexDirection>`	`"column"`	Main-axis direction. Accepts a per-breakpoint responsive object.
gap	`LayoutResponsiveValue<"base" \| "none" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "3xs">`	`"base"`	Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.
align	`LayoutResponsiveValue<FlexAlign>`	`"stretch"`	Cross-axis alignment. Accepts a per-breakpoint responsive object.
responsiveMode	`ResponsiveMode`	`"screen"`	Whether responsive values resolve against the viewport ("screen") or nearest container ("container").
justify	`LayoutResponsiveValue<FlexJustify>`	`"flex-start"`	Main-axis distribution. Accepts a per-breakpoint responsive object.
guidelines	`boolean`	`false`	Show dashed outline guidelines during development.

SiteFooterLead

Prop	Type	Default	Description
action	`ReactNode`		A call to action beneath the description, such as a `Button`.
brand	`ReactNode`		The brand mark above the title, such as a `Logo`.
title(required)	`string`		The pitch's heading.
children	`ReactNode`		The pitch's description: one or two sentences.
ref	`LayoutRef \| undefined`		Ref to the rendered host, whichever element `as` selects.
direction	`LayoutResponsiveValue<FlexDirection>`	`"column"`	Main-axis direction. Accepts a per-breakpoint responsive object.
gap	`LayoutResponsiveValue<"base" \| "none" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "3xs">`	`"base"`	Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.
as	`"div" \| "article" \| "aside" \| "figcaption" \| "figure" \| "footer" \| "header" \| "li" \| "main" \| "nav" \| "ol" \| "section" \| "span" \| "ul"`		Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: `as="button"` is a type error, because the design-system answer is the Button component. Event handlers and the ref accept any host element. `as` and `render` are mutually exclusive; if both are passed, `render` wins (a dev-only warning fires).
align	`LayoutResponsiveValue<FlexAlign>`	`"stretch"`	Cross-axis alignment. Accepts a per-breakpoint responsive object.
responsiveMode	`ResponsiveMode`	`"screen"`	Whether responsive values resolve against the viewport ("screen") or nearest container ("container").
justify	`LayoutResponsiveValue<FlexJustify>`	`"flex-start"`	Main-axis distribution. Accepts a per-breakpoint responsive object.
guidelines	`boolean`	`false`	Show dashed outline guidelines during development.

SiteFooterLegal

Prop	Type	Default	Description
as	`"dd" \| "dt" \| "figcaption" \| "legend" \| "li" \| "p" \| "span"`		Render as a different host element from the closed text vocabulary ({@link TextElement}). The set is deliberately closed and text-only: `as="div"` and `as="label"` are type errors (use Box for decorative wrappers, Label for form labels). Ref and event-handler types remain the default element's (HTMLParagraphElement). `as` and `render` are mutually exclusive; if both are passed, `render` wins (a dev-only warning fires).
size	`ResponsiveValue<"caption" \| "paragraph-sm" \| "paragraph" \| "paragraph-lg" \| "subheading" \| "subheading-lg" \| "heading-sm">`	`"paragraph-sm"`	Type role - a single role or a responsive object like `{ base: "paragraph-sm", md: "paragraph-lg" }`.
variant	`"default" \| "muted" \| "accent"`		Text colour variant
weight	`"normal" \| "medium" \| "semibold"`		Font weight

SiteFooterLink

Prop	Type	Default	Description
icon	`IconComponent`		Icon shown before the link text, at the `xs` icon size. Not underlined.
suffixIcon	`IconComponent`		Icon shown after the link text, at the `xs` icon size. Not underlined.

SiteFooterNav

Prop	Type	Default	Description
aria-label	`string`	`"Footer"`	Names the footer's navigation landmark.
as	`"div" \| "article" \| "aside" \| "figcaption" \| "figure" \| "footer" \| "header" \| "li" \| "main" \| "nav" \| "ol" \| "section" \| "span" \| "ul"`		Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: `as="button"` is a type error, because the design-system answer is the Button component. Event handlers and the ref accept any host element. `as` and `render` are mutually exclusive; if both are passed, `render` wins (a dev-only warning fires).
ref	`LayoutRef \| undefined`		Ref to the rendered host, whichever element `as` selects.

SiteFooterSocial

Prop	Type	Default	Description
as	`"div" \| "article" \| "aside" \| "figcaption" \| "figure" \| "footer" \| "header" \| "li" \| "main" \| "nav" \| "ol" \| "section" \| "span" \| "ul"`		Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: `as="button"` is a type error, because the design-system answer is the Button component. Event handlers and the ref accept any host element. `as` and `render` are mutually exclusive; if both are passed, `render` wins (a dev-only warning fires).
ref	`LayoutRef \| undefined`		Ref to the rendered host, whichever element `as` selects.

SiteFooterSocialLink

Prop	Type	Default	Description
label(required)	`string`		The network's name, which names the link.
network(required)	`"x" \| "facebook" \| "google" \| "instagram" \| "linkedin" \| "pinterest" \| "tiktok" \| "whatsapp" \| "youtube"`		Which network's mark to draw.

Also exports

componentSiteFooter
typeSiteFooterBarProps
interfaceSiteFooterColumnProps
interfaceSiteFooterLeadProps
typeSiteFooterLegalProps
typeSiteFooterLinkProps
interfaceSiteFooterNavProps
typeSiteFooterProps
interfaceSiteFooterSocialLinkProps
typeSiteFooterSocialProps

Composition

Builds on

Anchor, Box, Flex, Grid, Heading, SocialIcon, Stack, Text