The page skeleton

A page is always two pieces, top to bottom: PageNav (the sticky breadcrumb bar) followed by PageContainer (the centered body, max-w-6xl wide). Every page in this product renders both, in this order, with nothing else at that outer level.

What goes inside PageContainer

The skeleton is fixed; its content is not. The default slot of PageContainer takes whatever the page needs:

• A PageHeader for the page's title, description, and primary actions. Almost every page has exactly one, immediately inside PageContainer.
• One or more PageSection blocks below it, when the content breaks into titled groups, like the separate cards on a settings page.
• Plain content, when the body is a single composition (a table or a form) with nothing further to label.

Guidelines

• Always pair them. PageContainer assumes PageNav rendered the breadcrumb above it and never repeats page-level chrome.
• Do not add horizontal padding or a max-width around PageContainer. It already owns both.
• Do not use PageSection to wrap a single block. Go straight to content when there is nothing to title.

Example

1<template>2  <PageNav :breadcrumb="crumbs" />3  <PageContainer>4    <div class="flex flex-col gap-10">5      <PageHeader title="Nightly dependency bump">6        <template #actions>7          <Button variant="outline">Re-run</Button>8        </template>9      </PageHeader>10  11      <PageSection title="Summary" description="What changed and why.">12        <!-- section content -->13      </PageSection>14    </div>15  </PageContainer>16</template>