Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Footers

Site footer with host-supplied navigation, social links, copyright, and optional newsletter form.

Layout@gaudi/design-system/layout/FooterView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Footers from '@gaudi/design-system/layout/Footer';

Usage

import Footer from '@gaudi/design-system/layout/Footer';
<Footer sections={footerLinks} copyrightName='Example Studio' newsletterProps={{ endpoint: '/api/subscribe' }} />

Examples

Storybook

With newsletter

Storybook

Centered

Storybook

Compact inline

Storybook

Newsletter unavailable

Storybook

Newsletter error

Storybook

API

8 props

Accessibility

Retains the footer landmark and uniquely named navigation regions. Supply descriptive link labels and a configured newsletter endpoint before allowing subscription.

LinkLink centralizes navigation semantics for internal, anchor, and external links.NavigationThe site header block: brand, primary NavigationMenu with a two-block Blog panel (categories beside recent posts) or a Categories panel on the supplied blog route, search, theme switch, and a phone sheet below lg. LayoutContainer renders it from menuProps.ArticleA complete blog article with Gaudi journal navigation, PostHeader metadata, reading progress, TableOfContents section navigation, expandable images, a gallery, and captioned video. The main Blog article is joined by a centered Focused essay, a Technical tutorial with nested navigation and code, a wider Photo essay with a gallery, and a Series article with PostSeriesBox navigation across three parts. Each workflow reuses the same scroll boundary, header, media controls, and layout component. Contents-enabled examples use the shared TableOfContents block for links, active sections, and nested branch controls.NewsletterNewsletter sections built from one email subscription form, with an explicit host endpoint and local pending, success, and error feedback.LayoutContainerAsync server layout that composes theme context, navigation, a skip link, article content, footer, and host-provided structured data.