LagoPageHeader
Internal QA/reference page for the canonical LAGO page-level header. Every example uses the real production LagoPageHeader component. Not linked from any product navigation.
Standard, Compact & Action Variants
DS-004 LagoPageHeader — the canonical page-level header for LAGO operational and administrative pages. Sits directly on the page surface, not a card or navigation chrome.
Title only
Bookings
Title + description
My Fleet
Manage the vessels and equipment available to your business.
Title + primary action
Experiences
Title + multiple actions
Team
Manage your operator team members and their access.
Compact variant
Reduced vertical density for dense operational pages.
Dispatch Board
12Detail, Breadcrumbs & Tabs
The detail variant (back navigation + entity title + metadata + actions), breadcrumbs integration (DS-006), and tabbed variant (DS-005).
Detail variant
Back action + entity title + metadata + contextual actions. Optional thumbnail.
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
Breadcrumbs + title
DS-006 Breadcrumbs — use only when hierarchy adds meaningful context.
Sea Ray 320
Manage this vessel's specifications, availability, and bookings.
Title + tabs (stateful)
DS-005 LagoTabs via LagoPageHeaderTabs. Keyboard: ArrowLeft/Right, Home, End. Roving tabindex.
Experience Settings
Configure how this experience appears and operates.
Breadcrumbs + title + tabs + actions
The full composition: breadcrumbs, title, description, primary + secondary actions, and tabs beneath.
Sunset Kayak Tour
Manage availability, pricing, and bookings for this experience.
Responsive, Accessibility & Reference
How the PageHeader adapts across viewports, its accessibility behavior, and dependency integration.
Responsive behavior
Desktop: title + actions share a row. Tablet: actions wrap beneath. Mobile: header stacks vertically, primary action stays accessible.
Resize the window to see the layout adapt
Bookings
View and manage all bookings for your experiences.
Accessibility
- Heading hierarchy: title renders as h1 (font-heading text-h2)
- Breadcrumbs: nav element with aria-label="Breadcrumb", aria-current="page" on current
- Tabs (stateful): role="tablist"/"tab", aria-selected, roving tabindex, ArrowLeft/Right/Home/End
- Tabs (navigation): nav with aria-current="page" on active link
- Actions: DS-001 Button — keyboard accessible, visible focus ring
- Back action: renders as a Link with accessible text label
Dependency / reference
Component: src/components/lago/LagoPageHeader.jsx
Variants: standard · compact · detail · with-tabs · multiple-actions
DS-001 Button: primary action uses variant="navy"; secondary uses tealOutline/lagoGhost
DS-002 Iconography: Lucide icons for back, breadcrumb, action, status
DS-005 LagoTabs: LagoPageHeaderTabs — navigation or stateful mode
DS-006 Breadcrumbs: integrated via the breadcrumbs prop
Not a card: no structural shadow, no card background, no card border
Not AppShell: does not duplicate global navigation (DS-020 remains separate)
Responsive Typography Calibration — PREVIEW ONLY
Compares the current fixed DS-004 typography against a proposed responsive calibration using existing LAGO type tokens. No production code, tokens, or configs have been modified. User visual approval is required before any production change.
Calibration reference
Proposed responsive values per breakpoint. All sizes use existing LAGO type tokens (H1, H2, H2-mobile, H3, Body, Label, Label Small). No arbitrary sizes invented.
| Element | Desktop ≥1024 | Tablet 768–1023 | Mobile ≤767 |
|---|---|---|---|
| Standard / Detail title | H1 · 36/44/700 | H2 · 28/36/700 | H2 mobile · 24/32/700 |
| Compact title | H2 · 28/36/700 | H3 · 22/30/700 | H3 · 22/30/700 |
| Description | Body · 14/22/400 | Body · 14/22/400 | Body · 14/22/400 |
| Contextual tabs | Label · 14/20/600 | Label · 14/20/600 | Label Small · 12/18/600 |
1534px — Desktop
Rendered at exactly 1534px. Scroll horizontally if wider than your viewport. Each variant shows CURRENT (fixed) above RESPONSIVE CALIBRATION (per-viewport).
Standard
Water Experiences
Discover and book premium water experiences across Ontario.
Water Experiences
Discover and book premium water experiences across Ontario.
Compact
Dispatch Board
12Dispatch Board
12Detail
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
With Tabs
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
1024px — Desktop / Tablet boundary
Rendered at exactly 1024px. Scroll horizontally if wider than your viewport. Each variant shows CURRENT (fixed) above RESPONSIVE CALIBRATION (per-viewport).
Standard
Water Experiences
Discover and book premium water experiences across Ontario.
Water Experiences
Discover and book premium water experiences across Ontario.
Compact
Dispatch Board
12Dispatch Board
12Detail
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
With Tabs
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
768px — Tablet
Rendered at exactly 768px. Scroll horizontally if wider than your viewport. Each variant shows CURRENT (fixed) above RESPONSIVE CALIBRATION (per-viewport).
Standard
Water Experiences
Discover and book premium water experiences across Ontario.
Water Experiences
Discover and book premium water experiences across Ontario.
Compact
Dispatch Board
12Dispatch Board
12Detail
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
With Tabs
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
430px — Mobile
Rendered at exactly 430px. Scroll horizontally if wider than your viewport. Each variant shows CURRENT (fixed) above RESPONSIVE CALIBRATION (per-viewport).
Standard
Water Experiences
Discover and book premium water experiences across Ontario.
Water Experiences
Discover and book premium water experiences across Ontario.
Compact
Dispatch Board
12Dispatch Board
12Detail
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
With Tabs
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
390px — Mobile
Rendered at exactly 390px. Scroll horizontally if wider than your viewport. Each variant shows CURRENT (fixed) above RESPONSIVE CALIBRATION (per-viewport).
Standard
Water Experiences
Discover and book premium water experiences across Ontario.
Water Experiences
Discover and book premium water experiences across Ontario.
Compact
Dispatch Board
12Dispatch Board
12Detail
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
With Tabs
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
375px — Mobile
Rendered at exactly 375px. Scroll horizontally if wider than your viewport. Each variant shows CURRENT (fixed) above RESPONSIVE CALIBRATION (per-viewport).
Standard
Water Experiences
Discover and book premium water experiences across Ontario.
Water Experiences
Discover and book premium water experiences across Ontario.
Compact
Dispatch Board
12Dispatch Board
12Detail
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
With Tabs
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
320px — Mobile
Rendered at exactly 320px. Scroll horizontally if wider than your viewport. Each variant shows CURRENT (fixed) above RESPONSIVE CALIBRATION (per-viewport).
Standard
Water Experiences
Discover and book premium water experiences across Ontario.
Water Experiences
Discover and book premium water experiences across Ontario.
Compact
Dispatch Board
12Dispatch Board
12Detail
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
Sea Ray 320
4.824 ft bowrider · 8 guests · 300 HP
With Tabs
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
Manage Your Water Experience Inventory
Configure availability, pricing, and bookings.
Long title — wrapping verification
Intentionally long title to verify wrapping at mobile widths. CURRENT (28/36 fixed) vs CALIBRATED (24/32 mobile).
375px — Mobile
Supercalifragilisticexpialidocious Water Experience Management Dashboard
Verify long title wrapping at mobile widths.
Supercalifragilisticexpialidocious Water Experience Management Dashboard
Verify long title wrapping at mobile widths.
320px — Mobile
Supercalifragilisticexpialidocious Water Experience Management Dashboard
Verify long title wrapping at mobile widths.
Supercalifragilisticexpialidocious Water Experience Management Dashboard
Verify long title wrapping at mobile widths.
Tab typography close-up
Contextual tabs at desktop (Label 14/20/600) vs mobile (Label Small 12/18/600). Active indicator, spacing, and horizontal scroll preserved. No pills, backgrounds, or shadows.
1534px
768px
375px
320px