Footer Newsletter
BlockA site footer with a newsletter sign-up and social links beside four columns of links.
- Footers
- 3 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add footer-newsletterimport { DEFAULT } from "@/components/blocks/footer-newsletter"; export default function Page() { return <DEFAULT />;}<FooterNewsletterBlock>
| Prop | Type | Default |
|---|---|---|
brandThe brand: a name or a logo. | ReactNode | "Acme" |
copyright | ReactNode | "© Acme. All rights reserved." |
description | ReactNode | "Build beautiful interfaces, effortlessly — the modern way to create polished, animated products." |
groups | FooterLinkGroup[] | DEFAULT_FOOTER_NEWSLETTER_GROUPS |
headingLevelLevel of the newsletter's and each link group's heading. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
navLabelAccessible name of the link navigation. | string | "Footer" |
newsletterThe sign-up form's text. | FooterNewsletter | null | DEFAULT_NEWSLETTER |
onSubscribeCalled with a valid email address on submit. | (email: string) => void | — |
social | FooterSocialLink[] | DEFAULT_FOOTER_NEWSLETTER_SOCIAL |
socialLabelAccessible name of the social links list. | string | "Social links" |
Plus every attribute of <footer>.
A footer landmark with its link columns in a named nav, each titled by a heading of configurable level. The newsletter is a form named by its heading, with a labelled email field (autocomplete=email); an invalid address marks the field aria-invalid and ties the message to it, and a successful sign-up is confirmed in a status region. Social links always carry their name as text, and external ones say they open a new tab.