PageHeader Wireframe
All possible PageHeader configurations — click any card to view fullscreen
PageHeader Wireframe
All possible PageHeader configurations — click any card to view fullscreen
PageHeader Row Structure
Row 1: Page Title (mandatory) + Actions Slot (optional) — hides actions when bulk active
Row 2: Subtitle (optional) — muted text, can include counts
Row 3: Search (optional) OR Bulk Bar (conditional) — mutually exclusive
Row 4: Tabs OR List Header (optional) — mutually exclusive, pb-0
Flex Chain
MasterLayout h-dvh flex-col
└ wrapper flex-1 overflow-hidden
└ ContentArea flex-col flex-1 min-h-0
├ PageHeader shrink-0 sticky
└ ContentBody flex-1 overflow-y-auto
Rules
Row 3: Search and Bulk Bar are mutually exclusive
Row 4: Tabs and List Header are mutually exclusive
Row 4: Always pb-0 (content sits flush below)
Bulk: Actions slot hides when bulk bar is active
Mobile: Title hidden, TopBar shows it instead
Z-Index Layers
z-70Logo button
z-60Mobile drawer
z-50TopBar + overlay
z-40Sidebar + PageHeader