Core Layout Components Overview

The Osirion.Blazor Core Layout module provides essential structural components for building modern web application layouts. These components offer the foundation for creating consistent, responsive, and visually appealing page structures.

Available Components

Background Pattern

Decorative background component that adds visual interest with customizable patterns, gradients, and textures to enhance page aesthetics.

Footer

Comprehensive footer component with support for links, contact information, social media icons, and multi-column layouts for site-wide navigation and information.

Page Layout

Main layout wrapper component that provides consistent page structure, responsive grid systems, and content organization patterns.

Page Loading

Loading state component with customizable animations and indicators to provide user feedback during page transitions and data loading.

Sticky Sidebar

Advanced sidebar component with sticky positioning, collapsible sections, and responsive behavior for navigation and secondary content.

Key Features

• Responsive Design: All layout components adapt to different screen sizes
• Flexible Grid System: CSS Grid and Flexbox-based layouts
• Performance Optimized: Efficient rendering and minimal layout shifts
• Accessibility: WCAG compliant with proper semantic structure
• Customizable Theming: Extensive styling and branding options

Getting Started

To use layout components in your project:

@using Osirion.Blazor.Core

<PageLayout>
    <Header>
        <!-- Navigation content -->
    </Header>
    
    <MainContent>
        <BackgroundPattern Pattern="@PatternType.Dots" />
        
        <StickySidebar Position="@SidebarPosition.Left">
            <!-- Sidebar content -->
        </StickySidebar>
        
        <!-- Main page content -->
    </MainContent>
    
    <Footer Links="@footerLinks" SocialMedia="@socialLinks" />
</PageLayout>

<PageLoading IsVisible="@isLoading" Message="Loading content..." />

Layout Patterns

The layout components support various common patterns:

• Single Column: Simple, focused content layout
• Two Column: Main content with sidebar
• Three Column: Content with dual sidebars
• Full Width: Edge-to-edge content presentation
• Centered: Contained content with maximum width

Responsive Behavior

All layout components include:

• Mobile-First Design: Optimized for mobile devices
• Breakpoint Management: Automatic layout adjustments
• Touch-Friendly: Mobile gesture and interaction support
• Performance: Optimized for all device types

These layout components provide the structural foundation for building professional, responsive web applications with consistent design patterns.