Page Layout — Veritheme

Stacked

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

html

Logo

Sign In

<div class="vt-min-h-screen vt-flex vt-flex-col">
  <header class="vt-h-16 vt-border-b">...</header>
  <main class="vt-flex-1 vt-p-6">...</main>
  <footer class="vt-border-t vt-py-6">...</footer>
</div>

Sidebar + Content

App layout with fixed sidebar and scrollable content area.

html

Dashboard

J

Revenue

$12,450

Users

1,234

Orders

567

<div class="vt-flex vt-h-screen">
  <aside class="vt-w-64 vt-border-r">...</aside>
  <div class="vt-flex-1 vt-flex vt-flex-col">
    <header class="vt-h-14 vt-border-b">...</header>
    <main class="vt-flex-1 vt-p-6">...</main>
  </div>
</div>

Constrained Width

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

html

Brand

Sign In

<div class="vt-min-h-screen vt-flex vt-flex-col">
  <header class="vt-border-b">
    <div class="vt-max-w-5xl vt-mx-auto vt-px-6">...</div>
  </header>
  <main class="vt-flex-1">
    <div class="vt-max-w-5xl vt-mx-auto vt-px-6 vt-py-8">...</div>
  </main>
  <footer class="vt-border-t">
    <div class="vt-max-w-5xl vt-mx-auto vt-px-6">...</div>
  </footer>
</div>

Holy Grail

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

html

Brand

<div class="vt-flex vt-h-screen">
  <aside class="vt-w-64 vt-border-r">...</aside>
  <main class="vt-flex-1 vt-overflow-auto">
    <header class="vt-h-14 vt-border-b vt-sticky vt-top-0">...</header>
    <div class="vt-p-6">...</div>
  </main>
</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