Page Chrome

Per-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.

Layout@gaudi/design-system/layout/PageChrome

View in Storybook Source

Installation

pnpm add github:g-udi/design-system

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

import PageChrome from '@gaudi/design-system/layout/PageChrome';

Usage

import PageChrome from '@gaudi/design-system/layout/PageChrome';
// app/about/page.js: the page draws its own header background.export default function AboutPage() {  return (    <>      <PageChrome background={ false } />      <AboutHeader />    </>  );}

Examples

Playground

Storybook

API

2 props

Accessibility

Renders only a hidden, aria-hidden marker and affects decorative layers only: the background and scroll edges are aria-hidden, so no content, landmark or focus order changes.

LayoutContainerAsync server layout that composes theme context, navigation, a skip link, article content, footer, and host-provided structured data.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 HeaderPage or section introduction: optional eyebrow, a title (h1 by default), description and actions, with optional sticky and divider modes.