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 automatically shifts to a two-column layout on desktop.

Example: content + sidebar shell

LOGO

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

<div class="wckd-page">
  <header>
    <div class="site-logo"><a href="/">Brand</a></div>
    <nav class="wckd-menu"><ul class="horizontal align-right">...</ul></nav>
    <a class="button round-xl" href="#">Action</a>
  </header>
  <main>
    <section>...</section>
    <aside>...</aside>
  </main>
  <footer>...</footer>
</div>

← All patterns