Layout component

Public Page Shell

Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.

10 props3 slots0 outputsTheme readyResponsive

Interactive playground

Configure Public Page Shell

Change any prop and inspect the server-rendered component immediately.

Live preview

Header slot

Public page content

Component code

<PublicPageShell
  fullWidth="false">
  <div data-slot="before">
    <div class="showcase-slot">before slot</div>
  </div>
  <div data-slot="after">
    <div class="showcase-slot">after slot</div>
  </div>
</PublicPageShell>

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Complete public page shell

Use the shell around a complete marketing or public-service page.

Live preview

Header slot

Public page content

Component usage.wrn

<PublicPageShell
  maxWidth="xl"
  fullWidth="false">
  <div data-slot="before">
    <div class="showcase-slot">before slot</div>
  </div>
  <div class="showcase-shell-preview">
    <header>Header slot</header>
    <main>Public page content</main>
    <footer>Footer slot</footer>
  </div>
  <div data-slot="after">
    <div class="showcase-slot">after slot</div>
  </div>
</PublicPageShell>

Compact

Constrained documentation shell

Keep long-form documentation readable with a compact content width.

Live preview

Header slot

Public page content

Component usage.wrn

<PublicPageShell
  maxWidth="compact"
  fullWidth="false"
  headerOffset="sm"
  background="soft"
  size="sm"
  variant="secondary">
  <div data-slot="before">
    <div class="showcase-slot">before slot</div>
  </div>
  <div class="showcase-shell-preview">
    <header>Header slot</header>
    <main>Public page content</main>
    <footer>Footer slot</footer>
  </div>
  <div data-slot="after">
    <div class="showcase-slot">after slot</div>
  </div>
</PublicPageShell>

Advanced

Full-bleed landing page

Allow full-width sections while keeping overflow and minimum-height behavior consistent.

Live preview

Header slot

Public page content

Component usage.wrn

<PublicPageShell
  size="lg"
  variant="success">
  <div data-slot="before">
    <div class="showcase-slot">before slot</div>
  </div>
  <div class="showcase-shell-preview">
    <header>Header slot</header>
    <main>Public page content</main>
    <footer>Footer slot</footer>
  </div>
  <div data-slot="after">
    <div class="showcase-slot">after slot</div>
  </div>
</PublicPageShell>

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`maxWidth`	string	`"full"`	No
`fullWidth`	boolean	`true`	No
`headerOffset`	string	`"none"`	No
`background`	string	`"default"`	No
`overflow`	string	`"clip"`	No
`minHeight`	string	`"screen"`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"default"`	No
`class`	string	`""`	No