MindscapeAnalytics
Where AI Meets Innovation
Loading resources...0%
Where AI Meets Innovation
Demonstrating the flexible layout system with real-world examples
This approach uses the FlexibleSection component which handles container classes automatically. This is the recommended approach for most sections.
Just wrap your content in FlexibleSection and set fullWidth prop
Works correctly on mobile and desktop with proper padding
Can pass the fullWidth prop from parent components
This approach uses the getContainerClasses utility directly. Use when you need to maintain the existing section structure.
Maintain your existing section structure
Configure container options directly with parameters
Set noPadding and additional className options
This section uses the full width of the viewport
This section uses the default constrained width
This section uses a custom max-width of xl
interface MyComponentProps {
fullWidth?: boolean;
// other props...
}
export function MyComponent({ fullWidth = false, ...props }: MyComponentProps) {
return (
<FlexibleSection fullWidth={fullWidth} className="...">
{/* Component content */}
</FlexibleSection>
);
}
Components should accept and propagate the fullWidth prop to enable layout consistency across the application.
