Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA marketing footer with a brand block, collapsible link columns, a validated newsletter form, social and legal links, a status pill and a controls slot.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
The footer sizes itself with container queries, so it lays out by the width it is given rather than the viewport. Below about 672px the link columns become disclosures.
variant="minimal" centers the brand, puts every link on one wrapping line, and keeps the legal links and status in a single row.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "full" | "minimal" | "full" | Columns and newsletter, or one centered stack. |
brand | { name; logo?; href?; tagline? } | - | Brand block. |
groups | { title; links: SiteFooterLink[] }[] | [] | Link columns. Four or fewer read best. |
newsletter | SiteFooterNewsletter | - | Signup form. Omit to hide it. |
socials | { label; href; icon }[] | [] | Icon links. label is the accessible name. |
legal | SiteFooterLink[] | [] | Links in the bottom bar. |
copyright | ReactNode | "© <name>" | Copyright line. |
status | { label; href?; tone?: "operational" | "degraded" | "outage" } | - | Status pill with a coloured dot. |
actions | ReactNode | - | Bottom bar slot, for a locale select or theme toggle. |
SiteFooterLink is { label, href, badge?, external? }. External links open in a new tab, show an arrow and say "(opens in a new tab)" to screen readers.
SiteFooterNewsletter takes title, description, placeholder, buttonLabel, successMessage and onSubscribe(email). Reject or throw from onSubscribe to show your message as the error.
footer (the contentinfo landmark when it is not inside another landmark) with two labelled navigation landmarks, "Footer" and "Legal".aria-expanded and aria-controls; in wide containers the lists are always shown and the heading is plain text.aria-invalid and an error message tied with aria-describedby. The success message is announced through a polite status region.label as its accessible name.