Page Template

An opinionated page layout template based on Swiss Grid Design principles. Provides structured, clean layouts with sensible defaults for standard pages.

Swiss Grid Design Principles

Structured Spacing: 48-96px between major sections for clear visual hierarchy
Typography Hierarchy: 36-48px titles, 18px subtitles, consistent ratios
Grid-Based Alignment: 12-column Tailwind grid with consistent content widths
Generous Whitespace: Breathing room for content to shine
Minimal Aesthetic: Functional, clean design without unnecessary decoration

Live Preview

Interactive example showing the PageTemplate structure with all elements. Scroll within the preview to see sticky behavior.

Experience the Live Interaction

The page template features complex sticky positioning and responsive behaviors that are best experienced in a full browser window.

Open Live Demo

The live demo opens in a new tab to demonstrate full sticky scrolling and mobile responsiveness.

Basic Usage

import {PageTemplate, Brand, Footer} from '@opencosmos/ui';

      function MyPage() {
  return (
      <PageTemplate
        header={{
          logo: <Brand href="/">Brand Name</Brand>,
          navLinks: [
            { label: 'Home', href: '/' },
            { label: 'About', href: '/about' },
          ],
          sticky: true,
        }}
        title="Welcome to Our Platform"
        subtitle="Build amazing experiences with our design system"
        breadcrumbs={[
          { label: 'Home', href: '/' },
          { label: 'Platform' },
        ]}
        footer={
          <Footer
            logo={<Brand>Brand Name</Brand>}
            sections={[...]}
            copyright="© 2026 Company"
          />
        }
      >
        <article>Your content here</article>
      </PageTemplate>
      );
}

With Secondary Navigation

Add always-sticky secondary navigation for section/tab switching within your page.

<PageTemplate
        header={{ /* ... */ }}
        title="Documentation"
        breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Docs' }]}
        secondaryNav={{
          items: [
            { id: 'getting-started', label: 'Getting Started' },
            { id: 'components', label: 'Components' },
            { id: 'api', label: 'API Reference' },
          ],
          activeId: 'getting-started',
          onItemChange: (id) => navigate(id),
        }}
      >
        <section>Documentation content</section>
      </PageTemplate>

Content Width Variants

Choose the right content width for your use case:

// Standard width (1280px) - default
      <PageTemplate variant="standard" {...props}>

// Wide width (1440px) - for dashboards
        <PageTemplate variant="wide" {...props}>

// Narrow width (896px) - for reading-focused pages
          <PageTemplate variant="narrow" {...props}>

Props

Prop	Type	Default	Description
header	HeaderConfig	required	Header configuration (logo, navLinks, actions, sticky)
title	string	required	Page title
subtitle	string	undefined	Optional page subtitle
breadcrumbs	BreadcrumbItem[]	required	Breadcrumb navigation items
secondaryNav	SecondaryNavConfig	undefined	Optional secondary navigation
showCustomizer	boolean	true	Show customizer panel
variant	'standard' \| 'wide' \| 'narrow'	'standard'	Content width variant

Layout Structure

1. Header (z-50, sticky if enabled)

2. Title + Subtitle (Swiss Grid spacing: 48-96px vertical)

3. Breadcrumbs (static, below title)

4. Secondary Nav (z-40, always sticky)

5. Main Content (flex-1, fills space)

6. Footer (optional)

+ Customizer (sticky overlay, bottom-right)