Skip to content

Page shell

Stable Available in release assets

Keep header, main, and footer landmarks in a resilient full-block page frame without taking ownership of navigation or application state.

Page shell primary example

Show code
<div class="thin-page-shell">
  <header class="thin-container">
    <a href="#content">Skip to content</a>
    <strong>Field Notes</strong>
  </header>
  <main id="content">
    <section class="thin-region-rhythm">
      <div class="thin-container">
        <h1>A durable page shell</h1>
        <p>Header, main content, and footer remain ordinary landmarks.</p>
      </div>
    </section>
  </main>
  <footer class="thin-container">
    <p>Independent footer content</p>
  </footer>
</div>

Each authored example uses the production assets and includes copyable markup.

The default shell keeps landmarks in source order with optional skip navigation.

Show code
<div class="thin-page-shell">
  <header class="thin-container">
    <a href="#content">Skip to content</a>
    <strong>Field Notes</strong>
  </header>
  <main id="content">
    <section class="thin-region-rhythm">
      <div class="thin-container">
        <h1>A durable page shell</h1>
        <p>Header, main content, and footer remain ordinary landmarks.</p>
      </div>
    </section>
  </main>
  <footer class="thin-container">
    <p>Independent footer content</p>
  </footer>
</div>

A shell may omit the header when another landmark already supplies site identity.

Show code
<div class="thin-page-shell">
  <main id="content">
    <h1>Release notes</h1>
    <p>Content remains in a named main landmark.</p>
  </main>
  <footer class="thin-container">
    <p>Copyright notice</p>
  </footer>
</div>

Nested Container and Region rhythm

Compose container measure and region spacing inside the shell without changing landmark ownership.

Show code
<div class="thin-page-shell">
  <header class="thin-container">
    <strong>Field Notes</strong>
  </header>
  <main>
    <section class="thin-region-rhythm">
      <div class="thin-container">
        <h1>Article title</h1>
        <p>Region rhythm separates major sections.</p>
      </div>
    </section>
  </main>
</div>

Anatomy

  • Authored page wrapper
  • Header landmark
  • Main landmark
  • Footer landmark

Variants and sizes

  • Header, main, and footer — shown above
  • Main and footer — shown above
  • Nested Container and Region rhythm — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Short page
  • Long page
  • Narrow viewport
  • Long localized content
  • 200% and 400% zoom

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

This composition owns no JavaScript behavior. Links, controls, scrolling, landmarks, and focus retain native behavior.

Accessibility

Use the appropriate landmarks and heading hierarchy, preserve logical source order, and ensure any independently scrolling sidebar remains keyboard reachable through its native interactive content.

Contract
COMPOSE
Basis
Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use .thin-page-shell around ordinary header, main, and footer landmarks. Compose Container and Region rhythm inside it.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Landmarks and content remain in ordinary document order when layout styles are unavailable.

Assets and dependencies

  • /layouts.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts

Stability evidence

  • Header, main, and footer landmarks with resilient no-JavaScript fixture: test:tests/unit/library/page-shell-patterns.test.ts
  • Complete item-specific API, fallback, variant coverage, and difficult-state documentation: test:tests/unit/library/page-shell-patterns.test.ts
  • Recorded cross-theme and environmental review protocol: review:site/src/pages/quality/foundation-layout.astro#review-protocol

Composition

Derived from the examples and style specs, not authored.

Composes

Used by