PageLayout owns the page-level grid so product views stay consistent without each route reinventing structure. Aside renders on the right by default; pass asideSide="left" for inspector-style layouts.

#Default usage

<PageLayout
  aside={<div>Inspector</div>}
  header={<PageHeader eyebrow="Workspace" title="Releases" />}
>
  <p>Body</p>
</PageLayout>

#Import

import { PageLayout } from "@froggdesign/enter-ui-react";

#Article layout and landmarks

variant="default" renders its content as a main landmark. variant="article" renders an article with reading-layout typography and a sticky aside (hidden at 1240px and below). Authored paragraphs and lists use a reading measure capped at 640px, with stronger body text than secondary metadata. Cards, tables, code blocks, and previews retain the full content width and their own typography. Pair it with Breadcrumb, Text, PageHeader, and SideNav variant="toc"; no article CSS overrides are needed. Do not nest the default PageLayout's main landmark inside AppShellMain; use direct layout primitives there, or the article variant when the content really is an article.

#Landing layout

variant="landing" provides a centered 1160px marketing layout, responsive page padding and section spacing, and separated navigation and footer slots. Put the navigation in header and a PageHeader variant="hero" inside the main content. Compose sections with VStack, Grid, and Card; no page CSS is needed.

Landing spacing and aside columns apply only to that PageLayout's own slots. A nested component preview does not inherit the surrounding layout's padding, column count, or aside position. Article layout likewise keeps its content spacing and aside visibility local to its own slots.

<PageLayout variant="landing" header={<Link href="/">Portal</Link>}>
  <PageHeader variant="hero" title="Your customer workspace, connected." />
  <VStack as="section" gap={24} align="stretch">
    <SectionHeader title="Everything in its place" />
    <Grid min={260} gap={20}>{/* Feature cards */}</Grid>
  </VStack>
</PageLayout>

#Storefront layout

variant="storefront" provides a standalone consumer application canvas with a centered 1200px content width, neutral background, and responsive 16–40px side gutters. Navigation and footer slots remain compact. Content sections use a 32px gap and vertical padding, reduced to 24px at viewport widths of 600px and below. Short pages keep their natural row heights within a viewport-height canvas. Optional aside columns continue to stack below 900px.

Compose the navigation with HStack, and put the page title and content inside the main slot. The variant styles only its own layout slots, so nested cards, forms, and component previews keep their native EnterUI appearance.

<PageLayout
  variant="storefront"
  header={
    <HStack justify="between" wrap gap={16}>
      <Text weight="semibold">Roam</Text>
      <Link href="/stays">Explore stays</Link>
    </HStack>
  }
  footerActions={<Text size="sm" tone="muted">Booking help</Text>}
>
  <PageHeader title="Find your next stay" />
  <Grid min={280} gap={24}>{/* Stay cards */}</Grid>
</PageLayout>

#Accessibility

PageLayout wraps the header in <header>, the main content in <main>, and the aside in <aside> so the page exposes proper landmarks.

#API

• variant: "default", "article", "landing", or "storefront".
• header: slot rendered above the content.
• toolbar: optional sticky toolbar slot rendered between header and content.
• aside: optional aside slot.
• asideSide: "left" or "right" (default).
• footerActions: bottom action bar slot.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.