Page Header
Page or section introduction: optional eyebrow, a title (h1 by default), description and actions, with optional sticky and divider modes.
Layout
@gaudi/design-system/layout/PageHeaderInstallation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Usage
Examples
Playground
Sticky list heading
API
12 props
Accessibility
Renders a header element with one heading at the level you choose; keep a single h1 per page and use titleAs='h2' for section headers. Give a sticky header a titleId and point the region it labels at it with aria-labelledby. Actions keep their own accessible names.
Related
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.FootersSite footer with host-supplied navigation, social links, copyright, and optional newsletter form.NewsletterNewsletter sections built from one email subscription form, with an explicit host endpoint and local pending, success, and error feedback.Page ChromePer-page switches for LayoutContainer's site chrome: render it in a page to hide the layout background or the page scroll edges while that page is shown.LayoutContainerAsync server layout that composes theme context, navigation, a skip link, article content, footer, and host-provided structured data.