Page Layout

Common page layout patterns: stacked, sidebar + content, and dashboard.

Stacked

Classic top-down layout: header, main content, footer.

html

Logo

<div class="vt-flex vt-flex-col vt-inline-fe7a974f7c">
  <!-- Header -->
  <header class="vt-flex vt-items-center vt-justify-between vt-h-12 vt-px-4 vt-border-b vt-border-border-default vt-bg-surface-card vt-shrink-0">
    <span class="vt-text-sm vt-font-bold">Logo</span>
    <nav class="vt-flex vt-items-center vt-gap-4">
      <span class="vt-text-xs vt-text-foreground-secondary">Home</span>
      <span class="vt-text-xs vt-text-foreground-secondary">About</span>
      <span class="vt-text-xs vt-text-foreground-secondary">Contact</span>
    </nav>
    <div class="vt-btn vt-btn-primary vt-btn-sm">Sign In</div>
  </header>
  <!-- Main -->
  <main class="vt-flex-1 vt-p-6 vt-bg-surface-page">
    <div class="vt-max-w-md vt-mx-auto">
      <div class="vt-h-4 vt-bg-surface-moderate vt-rounded vt-w-1/3 vt-mb-3"></div>
      <div class="vt-h-3 vt-bg-surface-moderate vt-rounded vt-w-full vt-mb-2"></div>
      <div class="vt-h-3 vt-bg-surface-moderate vt-rounded vt-w-5/6 vt-mb-2"></div>
      <div class="vt-h-3 vt-bg-surface-moderate vt-rounded vt-w-4/6 vt-mb-4"></div>
      <div class="vt-grid vt-grid-cols-3 vt-gap-3">
        <div class="vt-h-16 vt-rounded-lg vt-bg-surface-moderate"></div>
        <div class="vt-h-16 vt-rounded-lg vt-bg-surface-moderate"></div>
        <div class="vt-h-16 vt-rounded-lg vt-bg-surface-moderate"></div>
      </div>
    </div>
  </main>
  <!-- Footer -->
  <footer class="vt-h-10 vt-border-t vt-border-border-default vt-bg-surface-card vt-flex vt-items-center vt-justify-center vt-shrink-0">
    <span class="vt-text-xs vt-text-foreground-muted">© 2026 Brand</span>
  </footer>
</div>

Sidebar + Content

App layout with fixed sidebar and scrollable content area.

html

Dashboard

Revenue

$12,450

Users

1,234

Orders

567

<div class="vt-flex vt-inline-393bda6e03">
  <!-- Sidebar -->
  <aside class="vt-w-48 vt-border-r vt-border-border-default vt-bg-surface-card vt-shrink-0 vt-flex vt-flex-col">
    <div class="vt-px-4 vt-py-3 vt-border-b vt-border-border-default">
      <span class="vt-text-sm vt-font-bold">App</span>
    </div>
    <nav class="vt-p-2 vt-space-y-0.5 vt-flex-1">
      <a class="vt-nav-item vt-nav-item-sm vt-active">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-house vt-w-3.5 vt-h-3.5">
          <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
        </svg> Dashboard
      </a>
      <a class="vt-nav-item vt-nav-item-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-layout-dashboard vt-w-3.5 vt-h-3.5">
          <rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect>
        </svg> Projects
      </a>
      <a class="vt-nav-item vt-nav-item-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-users vt-w-3.5 vt-h-3.5">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle>
        </svg> Team
      </a>
      <a class="vt-nav-item vt-nav-item-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-settings vt-w-3.5 vt-h-3.5">
          <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle>
        </svg> Settings
      </a>
    </nav>
  </aside>
  <!-- Content -->
  <div class="vt-flex-1 vt-flex vt-flex-col vt-min-w-0">
    <header class="vt-flex vt-items-center vt-justify-between vt-h-12 vt-px-4 vt-border-b vt-border-border-default vt-bg-surface-card vt-shrink-0">
      <span class="vt-text-xs vt-font-semibold">Dashboard</span>
      <div class="vt-flex vt-items-center vt-gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-search vt-w-3.5 vt-h-3.5 vt-text-foreground-muted">
          <path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-bell vt-w-3.5 vt-h-3.5 vt-text-foreground-muted">
          <path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path>
        </svg>
        <div class="vt-w-6 vt-h-6 vt-rounded-full vt-bg-info-fill/15 vt-flex vt-items-center vt-justify-center">
          <span class="vt-text-[8px] vt-font-bold vt-text-info-fill">J</span>
        </div>
      </div>
    </header>
    <main class="vt-flex-1 vt-p-4 vt-bg-surface-page vt-overflow-auto">
      <div class="vt-grid vt-grid-cols-3 vt-gap-3 vt-mb-4">
        <div class="vt-rounded-lg vt-border vt-border-border-default vt-bg-surface-card vt-p-3">
          <div class="vt-text-[9px] vt-text-foreground-muted vt-mb-1">Revenue</div>
          <div class="vt-text-base vt-font-bold">$12,450</div>
        </div>
        <div class="vt-rounded-lg vt-border vt-border-border-default vt-bg-surface-card vt-p-3">
          <div class="vt-text-[9px] vt-text-foreground-muted vt-mb-1">Users</div>
          <div class="vt-text-base vt-font-bold">1,234</div>
        </div>
        <div class="vt-rounded-lg vt-border vt-border-border-default vt-bg-surface-card vt-p-3">
          <div class="vt-text-[9px] vt-text-foreground-muted vt-mb-1">Orders</div>
          <div class="vt-text-base vt-font-bold">567</div>
        </div>
      </div>
      <div class="vt-rounded-lg vt-border vt-border-border-default vt-bg-surface-card vt-p-3">
        <div class="vt-h-3 vt-bg-surface-moderate vt-rounded vt-w-1/4 vt-mb-3"></div>
        <div class="vt-h-20 vt-bg-surface-moderate/50 vt-rounded-lg"></div>
      </div>
    </main>
  </div>
</div>

Constrained Width

Full-width header and footer with max-width centered content area.

html

Brand

<div class="vt-flex vt-flex-col vt-inline-393bda6e03">
  <!-- Header (full-width background) -->
  <header class="vt-border-b vt-border-border-default vt-bg-surface-card vt-shrink-0">
    <div class="vt-max-w-[420px] vt-mx-auto vt-flex vt-items-center vt-justify-between vt-h-12 vt-px-4">
      <span class="vt-text-sm vt-font-bold">Brand</span>
      <nav class="vt-flex vt-items-center vt-gap-4">
        <span class="vt-text-xs vt-text-foreground-secondary">Home</span>
        <span class="vt-text-xs vt-text-foreground-secondary">Products</span>
        <span class="vt-text-xs vt-text-foreground-secondary">About</span>
      </nav>
      <div class="vt-btn vt-btn-primary vt-btn-sm">Sign In</div>
    </div>
  </header>
  <!-- Main content (constrained) -->
  <main class="vt-flex-1 vt-bg-surface-page vt-overflow-auto">
    <div class="vt-max-w-[420px] vt-mx-auto vt-px-4 vt-py-5">
      <div class="vt-h-4 vt-bg-surface-moderate vt-rounded vt-w-1/3 vt-mb-3"></div>
      <div class="vt-h-3 vt-bg-surface-moderate vt-rounded vt-w-full vt-mb-2"></div>
      <div class="vt-h-3 vt-bg-surface-moderate vt-rounded vt-w-5/6 vt-mb-2"></div>
      <div class="vt-h-3 vt-bg-surface-moderate vt-rounded vt-w-4/6 vt-mb-4"></div>
      <div class="vt-grid vt-grid-cols-3 vt-gap-3 vt-mb-4">
        <div class="vt-h-14 vt-rounded-lg vt-border vt-border-border-default vt-bg-surface-card"></div>
        <div class="vt-h-14 vt-rounded-lg vt-border vt-border-border-default vt-bg-surface-card"></div>
        <div class="vt-h-14 vt-rounded-lg vt-border vt-border-border-default vt-bg-surface-card"></div>
      </div>
      <div class="vt-h-3 vt-bg-surface-moderate vt-rounded vt-w-full vt-mb-2"></div>
      <div class="vt-h-3 vt-bg-surface-moderate vt-rounded vt-w-3/4"></div>
    </div>
  </main>
  <!-- Footer (full-width background) -->
  <footer class="vt-border-t vt-border-border-default vt-bg-surface-card vt-shrink-0">
    <div class="vt-max-w-[420px] vt-mx-auto vt-flex vt-items-center vt-justify-between vt-h-10 vt-px-4">
      <span class="vt-text-xs vt-text-foreground-muted">© 2026 Brand</span>
      <div class="vt-flex vt-gap-3">
        <span class="vt-text-xs vt-text-foreground-muted">Privacy</span>
        <span class="vt-text-xs vt-text-foreground-muted">Terms</span>
      </div>
    </div>
  </footer>
</div>

Holy Grail

Three-column layout with header, sidebar, content, aside, and footer.

html

Brand

<div class="vt-flex vt-flex-col vt-inline-fe7a974f7c">
  <!-- Header -->
  <header class="vt-flex vt-items-center vt-justify-between vt-h-10 vt-px-4 vt-border-b vt-border-border-default vt-bg-surface-card vt-shrink-0">
    <span class="vt-text-xs vt-font-bold">Brand</span>
    <nav class="vt-flex vt-items-center vt-gap-4">
      <span class="vt-text-xs vt-text-foreground-secondary">Docs</span>
      <span class="vt-text-xs vt-text-foreground-secondary">API</span>
      <span class="vt-text-xs vt-text-foreground-secondary">Blog</span>
    </nav>
    <div class="vt-w-5 vt-h-5 vt-rounded-full vt-bg-surface-moderate"></div>
  </header>
  <!-- Body -->
  <div class="vt-flex vt-flex-1 vt-min-h-0">
    <!-- Left sidebar -->
    <aside class="vt-w-36 vt-border-r vt-border-border-default vt-bg-surface-card vt-p-2 vt-space-y-1 vt-shrink-0">
      <div class="vt-h-5 vt-bg-info-fill/10 vt-rounded vt-px-2 vt-flex vt-items-center vt-text-[9px] vt-text-info-fill vt-font-medium">Getting Started</div>
      <div class="vt-h-5 vt-rounded vt-px-2 vt-flex vt-items-center vt-text-[9px] vt-text-foreground-secondary">Components</div>
      <div class="vt-h-5 vt-rounded vt-px-2 vt-flex vt-items-center vt-text-[9px] vt-text-foreground-secondary">Theming</div>
      <div class="vt-h-5 vt-rounded vt-px-2 vt-flex vt-items-center vt-text-[9px] vt-text-foreground-secondary">Utilities</div>
    </aside>
    <!-- Main content -->
    <main class="vt-flex-1 vt-p-4 vt-bg-surface-page vt-overflow-auto vt-min-w-0">
      <div class="vt-h-3 vt-bg-surface-moderate vt-rounded vt-w-1/3 vt-mb-2"></div>
      <div class="vt-h-2 vt-bg-surface-moderate vt-rounded vt-w-full vt-mb-1.5"></div>
      <div class="vt-h-2 vt-bg-surface-moderate vt-rounded vt-w-5/6 vt-mb-1.5"></div>
      <div class="vt-h-2 vt-bg-surface-moderate vt-rounded vt-w-4/6 vt-mb-3"></div>
      <div class="vt-h-16 vt-bg-surface-moderate/50 vt-rounded-lg vt-mb-3"></div>
      <div class="vt-h-2 vt-bg-surface-moderate vt-rounded vt-w-full vt-mb-1.5"></div>
      <div class="vt-h-2 vt-bg-surface-moderate vt-rounded vt-w-3/4"></div>
    </main>
    <!-- Right sidebar (TOC) -->
    <aside class="vt-w-32 vt-border-l vt-border-border-default vt-bg-surface-card vt-p-2 vt-space-y-1.5 vt-shrink-0">
      <div class="vt-text-[8px] vt-font-semibold vt-uppercase vt-text-foreground-muted vt-px-1">On this page</div>
      <div class="vt-text-[9px] vt-text-info-fill vt-font-medium vt-px-1">Overview</div>
      <div class="vt-text-[9px] vt-text-foreground-secondary vt-px-1">Installation</div>
      <div class="vt-text-[9px] vt-text-foreground-secondary vt-px-1">Usage</div>
      <div class="vt-text-[9px] vt-text-foreground-secondary vt-px-1">API</div>
    </aside>
  </div>
  <!-- Footer -->
  <footer class="vt-h-8 vt-border-t vt-border-border-default vt-bg-surface-card vt-flex vt-items-center vt-justify-center vt-shrink-0">
    <span class="vt-text-[9px] vt-text-foreground-muted">© 2026 Brand</span>
  </footer>
</div>

Guidelines

Compose page structure — header, main, footer — with semantic landmarks and one scrollable content area.

<main>

Wrap each region in its semantic landmark tag.

<div>

Don't

Don't build every region from a generic div.

API Reference

All utility classes available for the Page Layout component.

Class	Type	Description
`vt-min-h-screen`	Layout	Ensures full viewport height minimum
`vt-flex vt-flex-col`	Layout	Vertical flexbox container for stacking header, main, footer
`vt-flex-1`	Layout	Main content grows to fill available space
`vt-w-64`	Sidebar	Fixed sidebar width (256px)
`vt-max-w-5xl vt-mx-auto`	Constraint	Max-width container (1024px) centered horizontally
`vt-overflow-auto`	Scroll	Enables scrolling within main content area
`vt-sticky vt-top-0`	Position	Sticky header that remains at top on scroll
`vt-shrink-0`	Flex	Prevents header/footer from shrinking

Accessibility

Keyboard and screen reader support.

Feature	Details
Landmarks	Use semantic HTML: <header>, <main>, <aside>, <footer>, <nav>
Skip Links	Provide "Skip to main content" link at the top for keyboard users
Focus Management	Ensure focus order follows visual layout (sidebar → main → footer)
ARIA Labels	Use aria-label on landmark elements if multiple of same type exist
Responsive	Ensure sidebar collapses or becomes dismissible on mobile