StorefrontShell

templates

Outer shell — vertical layout: TopNav + main + Footer. Sticky nav, content flex-1, footer pinned. Mobile: MobileNav replaces TopNav on <768px.

ARIA Role: none (layout container)

Demo

Demo for StorefrontShell (templates)

Outer shell — vertical layout: TopNav + main + Footer. Sticky nav, content flex-1, footer pinned. Mobile: MobileNav replaces TopNav on <768px.

Props

Prop	Type	Required	Default
`topNav`	`React.ReactNode`	Yes	`—`
`children`	`React.ReactNode`	Yes	`—`
`footer`	`React.ReactNode`	Yes	`—`

TypeScript Interface

interface StorefrontShellProps {
  topNav: React.ReactNode;
  children: React.ReactNode;
  footer: React.ReactNode;
  announcementBar?: React.ReactNode;
}

Assertions (NASA Rule 5)

[type]All three slots required(NASA Rule 5)
[render]Vertical flex with TopNav sticky, main flex-1, footer auto height(NASA Rule 6)

Usage

Import

import { Storefrontshell } from '@epasslive/design-system'

Basic

<Storefrontshell />

With Variants

<Storefrontshell variant="primary" size="md" />