Footer Mega
BlockA mega footer: logo, four link columns and a newsletter sign-up, over a copyright and social bar.
- Footers
- 3 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add footer-megaimport { DEFAULT } from "@/components/blocks/footer-mega"; export default function Page() { return <DEFAULT />;}<FooterMegaBlock>
| Prop | Type | Default |
|---|---|---|
copyright | ReactNode | "© Acme. All rights reserved." |
description | ReactNode | "Accessible, animated React components for building modern interfaces with delightful interactions." |
groups | FooterLinkGroup[] | DEFAULT_FOOTER_MEGA_GROUPS |
headingLevelLevel of the newsletter's and each link group's heading. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
logoThe logo, or the brand's name. | ReactNode | "Acme" |
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_MEGA_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.