Application layouts
Reference pages for each layout shell. Each demo shows only the page chrome — title, description, breadcrumbs and actions — so you can copy the structure into real pages.
Choose a layout
Open a demo to inspect headers, subheaders and breadcrumbs in context.
Top bar
Authenticated app shell with a horizontal navigation bar.
Slim top bar
Compact top bar with no brand mark and icon-only appearance and auth controls.
Panel
Top bar shell with a two-thirds and one-third column grid.
Grid examples
Responsive equal-column, mixed-span and mixed-height card grids.
Sidebar
Authenticated app shell with a vertical sidebar rail.
Hybrid
Persistent sidebar plus a desktop utility top bar for search, appearance and account.
Sunken sidebar
Recessed navigation canvas with the working page inside one oversized card.
Bottom mobile nav
Mobile-first shell with a sticky bottom bar and expandable menu trees.
Auth
Centered guest layout for sign-in and registration flows.
Auth / Editorial
High-contrast split screen with an editorial product story.
Auth / Immersive
Cinematic full-bleed scene with a floating sign-in panel.
Auth / Workspace
Product-led sign-in with a live workspace preview.
Share
Centered public layout for sharing simple content such as files.
Marketing
Public marketing layout with navbar and footer.
Error
Slim system shell for HTTP errors with no navbar or session chrome.