Patterns

Page shell

Use this pattern when you need a stable page frame. Header, main, optional aside, and footer stay consistent while body content changes. Treat it as a starting point, an end state, or a variant reference.

Shell classes

.wckd-page wraps the viewport. Inside it, use semantic header, main, optional aside, and footer. If main contains an aside, the shell shifts to a two-column layout on desktop.

Primary nav uses nav.wckd-menu with ul.horizontal.hamburger-collection plus a sibling button.hamburger-btn when you need compact overflow; see Menu.

Live demo

Example: content + sidebar shell

Action

Main content region

Place your route content here. Keep layout concerns at shell level, then use utilities and components inside this region.

Section A

Independent content block.

Section B

Independent content block.

Code example

Markup

<div class="wckd-page">
  <header id="page-shell-demo-top">
    <div class="site-logo"><a href="/">Brand</a></div>
    <nav class="wckd-menu" aria-label="Primary">
      <ul class="horizontal hamburger-collection aligned-right">
        <li><a href="/overview">Overview</a></li>
        <li><a href="/docs">Docs</a></li>
      </ul>
    </nav>
    <a class="button round-xl" href="/signup">Action</a>
  </header>
  <main>
    <section>...</section>
    <aside>...</aside>
  </main>
  <footer>
    <a href="#page-shell-demo-top">Back to top</a>
  </footer>
</div>

When to use this pattern

Reach for a shell when the chrome should stay stable across routes and only the inner regions swap.

Checklist

← All patterns