Contact Us

Layout Templates

Visual reference for the layout system. PageGridLayout is the single template for all standard pages. BlankLayout is retained for no-chrome pages.

Standalone view

PageGrid — 11-Area Layout Grid

PageGridLayout is built on PageGrid, an 11-area CSS named grid. Navigation and aside columns auto-expand via CSS classes when populated, and collapse to a single column at ≤767px. Unused slots produce no DOM output.

banner
header
subheader
sidebar-header
main-header
sidebar
main (default)
aside
sidebar-footer
main-footer
footer

Custom properties: --page-sidebar-width (default: 20rem), --page-aside-width (default: 20rem) · Columns with no content collapse to 0fr.

Container

Standalone width-constraint wrapper. Used inside LayoutSection and available for direct use. PageGridLayout does not wrap the default slot in a Container — it sets a --page-section-content-max CSS variable that LayoutSection inner frames inherit. Sizes: content, content-wide, wide (default), full, inherit — consuming --pt-layout-* primitive tokens.

Show code 
{/* PageGridLayout — 11-area CSS grid template */}
<Layout
  title="Page Title"
  description="Page description."
  contentWidth="wide"
  sidebarPosition="start"
>
  <SiteHeader slot="header" />
  <LayoutSection slot="subheader" contentWidth="wide" verticalPadding="lg">
    <Hero heading="Page Hero" />
  </LayoutSection>
  <ThemeDocsSidebarNav slot="sidebar" />
  <TocAside slot="aside" headings={headings} />
  <!-- default slot: main content -->
  <article>Your content here.</article>
  <Pagination slot="main-footer" />
  <SiteFooter slot="footer" />
</Layout>

View full-page demo with all 11 slots populated →

PageGridLayout

The single standard page template. Exposes all 11 PageGrid areas as conditional named slots. All named slots are conditional — unpopulated areas produce no markup.

Slot Reference

Slot Name Grid Area Element Condition
banner banner <div data-area="banner"> If populated
header header <section data-area="header" aria-label="Site Header"> Default <Header />; slot overrides. Suppressed via showHeader=.
subheader subheader <section data-area="subheader" aria-label="Page heading"> If populated
sidebar-header sidebar-header <aside data-area="sidebar-header" aria-label="Sidebar header"> If populated
main-header main-header <section data-area="main-header" aria-label="Content header"> If populated
sidebar sidebar <aside data-area="sidebar" aria-label="Sidebar"> If populated
default main <main id="main-content"> Always
aside aside <aside data-area="aside" aria-label="Supplementary content"> If populated
sidebar-footer sidebar-footer <aside data-area="sidebar-footer" aria-label="Sidebar footer"> If populated
main-footer main-footer <section data-area="main-footer" aria-label="Page footer"> If populated
footer footer <div data-area="footer"> Default <Footer />; slot overrides.

Props

Prop Type Default Notes
title string required Page title for SEO
description string required Meta description
contentWidth "content" | "content-wide" | "wide" | "full" "wide" Default width inherited by LayoutSection inner frames in the default slot.
sidebarPosition "start" | "end" "start" Navigation column side (left/right)
sidebarWidth string — CSS value for --page-sidebar-width
asideWidth string — CSS value for --page-aside-width
showHeader boolean true Show the default header. Pass false to suppress entirely.
pagefindFilter string — Adds data-pagefind-filter="collection:{value}" to main.
hideScrollToTop boolean false Opt out of the sitewide scroll-to-top button for this page.
gitDatesSource string — Project-relative source file path for git-based date resolution.
class string — Additional CSS class(es) applied to the inner PageGrid element.

Slot Recipes

Common page patterns implemented by selecting which slots to populate. No separate layout files are needed — PageGridLayout handles all patterns.

Standard Page
header (if populated)
default contentWidth="wide" (LayoutSection frame)
footer (if populated)

Default slot only. contentWidth controls main width.

View demo →
Sidebar / Content Page
header (if populated)
sidebar slot="sidebar"
default contentWidth="content-wide"
footer (if populated)

Populate sidebar slot. Grid auto-expands sidebar column.

View demo →
Content / Aside Page
header (if populated)
default contentWidth="content-wide"
aside slot="aside"
footer (if populated)

Populate aside slot. Grid auto-expands aside column.

View demo →
Three-Column (Docs + Aside)
header (if populated)
sidebar
default contentWidth="content"
aside
footer (if populated)

Populate both sidebar and aside.

View demo →
Marketing / Landing Page
header (if populated)
subheader (hero)
default contentWidth="full" + per-LayoutSection contentWidth/gutter
footer (if populated)

Use contentWidth="full", set LayoutSection width with contentWidth, and compose background bands with background variants.

View demo →
Listing / Archive Page
header (if populated)
subheader (hero/title)
sidebar filters
default toolbar + items
main-footer (pager)
footer (if populated)

Compose toolbar + items in default slot. Filters in sidebar, pager in main-footer.

View demo →
Show code 
{/* Standard page — default slot only */}
<Layout title="..." description="..." contentWidth="wide">
  <SiteHeader slot="header" />
  <article>Content here.</article>
  <SiteFooter slot="footer" />
</Layout>

{/* Sidebar / docs — populate sidebar slot */}
<Layout title="..." description="..." contentWidth="content-wide">
  <ThemeDocsSidebarNav slot="sidebar" />
  <article>Content here.</article>
</Layout>

{/* Three-column — sidebar + aside */}
<Layout title="..." description="..." contentWidth="content">
  <ThemeDocsSidebarNav slot="sidebar" />
  <TocAside slot="aside" headings={headings} />
  <article>Content here.</article>
</Layout>

{/* Marketing / landing — full-width sections */}
<Layout title="..." description="..." contentWidth="full">
  <LayoutSection slot="subheader" contentWidth="wide" verticalPadding="lg">
    <Hero heading="Landing Hero" />
  </LayoutSection>
  <LayoutSection background="soft" contentWidth="wide">...</LayoutSection>
  <LayoutSection background="contrast" contentWidth="wide">...</LayoutSection>
</Layout>

  {/* Listing / archive — filters in sidebar, pager in main-footer */}
  <Layout title="..." description="..." contentWidth="content-wide">
  <FilterPanel slot="sidebar" />
  <ArticleList />
  <Pagination slot="main-footer" baseHref="/articles" currentPage={1} totalPages={5} />
</Layout>

Landmark Contracts

HTML landmark elements guaranteed by each template.

Landmark Element Template Notes
Banner role="banner" SiteHeader Declared by slotted component.
Navigation role="navigation" SiteHeader / sidebar component Declared by slotted component with its own aria-label.
Main <main id="main-content"> PageGridLayout Always present.
Complementary <aside aria-label="Supplementary content"> PageGridLayout When aside slot is populated.
Complementary <aside aria-label="Sidebar"> PageGridLayout When sidebar slot is populated. Additional sidebar-header/sidebar-footer areas also use <aside> with distinct labels.
Content info role="contentinfo" SiteFooter Declared by slotted component.

BlankLayout

Minimal layout with no site chrome or PageGrid wrappers. Use for print pages, embeds, or standalone content that doesn't need header/footer.

BlankLayout
default (full viewport, no header/footer)

Wraps BaseLayout directly. No PageGrid, no header, no footer.

Search

Search across pages and articles. Use arrow keys to navigate results.

Search across pages and articles.

Loading search...

Search is unavailable. Please try again later.

    No results for ""

    Try different keywords or fewer words.

    This site uses cookies and tracking technologies to improve your experience. You can accept all tracking, reject optional tracking, or allow only required functionality. Privacy Policy