Interactive testing environment for react-shared components
Current: Default
A page-level layout component with side-by-side or stacked modes for organizing header, content, and footer.
Customize the PageLayout properties and see the changes in real-time.
Digital Products & Courses
Digital Download
A comprehensive guide to mastering design principles and creating stunning visual content.
Digital Download
A comprehensive guide to mastering design principles and creating stunning visual content.
Digital Download
A comprehensive guide to mastering design principles and creating stunning visual content.
© 2024 Jane's Store. All rights reserved.
See how the layouts work at full width with realistic content.
Header sticky on left (33% width on xl screens), content scrolls on right. Stacks vertically on mobile.
Premium Digital Products
High-quality digital product designed to help you achieve your goals faster.
High-quality digital product designed to help you achieve your goals faster.
High-quality digital product designed to help you achieve your goals faster.
High-quality digital product designed to help you achieve your goals faster.
Made with ❤️ by Creator
Traditional vertical layout with header at top, content below. Better for mobile-first designs.
Exclusive content and resources
Discover amazing digital products that will transform your workflow and boost productivity.
Discover amazing digital products that will transform your workflow and boost productivity.
Discover amazing digital products that will transform your workflow and boost productivity.
© 2024 Digital Shop
For nested pages: hides header in stacked layout, reduces padding in side-by-side, forces secondary background.
Header is automatically hidden
Perfect for detail pages
Less top padding
Reduced padding (xl:pt-8 vs xl:pt-14)
Complete list of props and their descriptions.
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | 'side-by-side' | 'stacked' | 'side-by-side' | Page layout mode: side-by-side for sticky header, stacked for vertical layout |
| subPage | boolean | false | Enables sub-page mode: hides header in stacked layout, reduces padding in side-by-side |
| background | 'primary' | 'secondary' | 'secondary' | Background color (forced to 'secondary' when subPage is true) |
| header | ReactNode | undefined | Header content (sticky in side-by-side, hidden in stacked+subPage) |
| footer | ReactNode | undefined | Footer content displayed at bottom of content |
| children | ReactNode | undefined | Main page content |
| className | string | undefined | Additional CSS classes for the root container |
In side-by-side mode, the header is positioned sticky on the left (33% width on xl screens) with full viewport height. The content scrolls independently on the right. On mobile, it stacks vertically.
The layout is fully responsive. Side-by-side mode uses a grid that switches to single column on mobile (xl:grid-cols-[33%_1fr]). Header max-width is 500px on mobile, full width on desktop.
The component respects theme configuration for layout mode through the useThemeLayout hook. Layout can be overridden by theme settings.
Content has max-width of 800px in side-by-side mode, 1168px in stacked mode. The layout uses font-secondary class for typography.