Page Layout — uicraft

Stacked

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

html

Logo

Sign In

<div class="uc-min-h-screen uc-flex uc-flex-col">
  <header class="uc-h-16 uc-border-b">...</header>
  <main class="uc-flex-1 uc-p-6">...</main>
  <footer class="uc-border-t uc-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="uc-flex uc-h-screen">
  <aside class="uc-w-64 uc-border-r">...</aside>
  <div class="uc-flex-1 uc-flex uc-flex-col">
    <header class="uc-h-14 uc-border-b">...</header>
    <main class="uc-flex-1 uc-p-6">...</main>
  </div>
</div>

Constrained Width

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

html

Brand

Sign In

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

Holy Grail

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

html

Brand

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

API Reference

All utility classes available for the Page Layout component.

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