Footer

Composable footer primitives for CTAs, navigation groups, contact details, social links, newsletter forms, and legal links.

Quick Preview

Composition

Use this public composition when building Footer:

FooterRoot
├── FooterCta
│   ├── FooterCtaContent
│   └── FooterCtaActions
├── FooterBody
│   ├── FooterHeader
│   ├── FooterNav
│   └── FooterContactGrid
└── FooterBottom

Usage

import { FooterRoot, FooterBody, FooterNav } from "@giddaa-housing/ui/footer";

<FooterRoot>
	<FooterBody>
		<FooterNav aria-label="Footer navigation">{/* sections */}</FooterNav>
	</FooterBody>
</FooterRoot>;

Examples

Use this as a starting point for the marketing footer. Keep routing, analytics, newsletter submission, and social destinations in the consuming app.

Props

Prop/API	Type	Default	Description
`containerClassName`	`string`	-	Overrides the centered footer container on `FooterRoot`.
`showArrow`	`boolean`	`false`	Adds a trailing arrow affordance to `FooterLink`.
`variant` on FooterLink	`"default"	"brand"`	`"default"`
`className`	`string`	-	Local layout, spacing, or color overrides.
native/root props	React component props	-	Passed through to the underlying semantic element.

Accessibility

Use FooterRoot as the page-level footer landmark.
Provide aria-label values for footer navigation groups when there is more than one nav.
Give icon-only social links accessible names with aria-label.
Keep newsletter submission state and validation messages in the consuming app.