HeroSection Component

The HeroSection component is a versatile and powerful component designed for creating stunning hero sections on landing pages, article headers, and promotional areas. It supports multiple layout variants, background options, call-to-action buttons, and metadata display.

Overview

The HeroSection component provides a flexible foundation for creating impactful first impressions on your web pages. It supports both background images and side-by-side layouts, multiple variants for different use cases, and comprehensive customization options.

Key Features:

• Multiple layout variants (Hero, Jumbotron, Minimal)
• Background image or side image support
• Flexible content alignment options
• Call-to-action button integration
• Article metadata display
• Responsive design
• SSR compatibility
• Accessibility compliant

Parameters

Content Parameters

Image Parameters

Layout Parameters

Button Parameters

Styling Parameters

Metadata Parameters

Layout Variants

Hero Variant (Default)

The standard hero layout with balanced content and image sizing. Ideal for landing pages and main sections.

<HeroSection 
    Variant="HeroVariant.Hero"
    Title="Welcome to Our Platform"
    Subtitle="Build Amazing Applications"
    Summary="Discover the power of modern web development with our comprehensive component library."
    ImageUrl="/images/hero-image.jpg"
    PrimaryButtonText="Get Started"
    PrimaryButtonUrl="/getting-started"
    SecondaryButtonText="Learn More"
    SecondaryButtonUrl="/documentation" />

Jumbotron Variant

Large, prominent hero section perfect for major announcements or product showcases.

<HeroSection 
    Variant="HeroVariant.Jumbotron"
    Title="Revolutionary New Features"
    Subtitle="Transform Your Workflow"
    Summary="Experience next-generation tools designed to accelerate your development process."
    UseBackgroundImage="true"
    ImageUrl="/images/jumbotron-bg.jpg"
    MinHeight="80vh"
    PrimaryButtonText="Explore Features"
    PrimaryButtonUrl="/features" />

Minimal Variant

Clean, minimal hero section ideal for documentation pages and focused content.

<HeroSection 
    Variant="HeroVariant.Minimal"
    Title="Documentation"
    Summary="Comprehensive guides and references for developers."
    ShowPrimaryButton="false"
    ShowSecondaryButton="false"
    HasDivider="false" />

Content Customization

Using Custom Content Fragments

For advanced content customization, use the content fragment parameters:

<HeroSection>
    <TitleContent>
        <h1 class="custom-hero-title">
            <span class="highlight">Advanced</span> Component Library
        </h1>
    </TitleContent>
    
    <SubtitleContent>
        <p class="custom-subtitle">
            <strong>Blazor</strong> components for modern web applications
        </p>
    </SubtitleContent>
    
    <SummaryContent>
        <div class="custom-summary">
            <p>Build faster with our comprehensive set of UI components.</p>
            <ul class="feature-list">
                <li>SSR Compatible</li>
                <li>Accessibility First</li>
                <li>Performance Optimized</li>
            </ul>
        </div>
    </SummaryContent>
    
    <ChildContent>
        <div class="custom-content">
            <div class="stats-row">
                <div class="stat">
                    <span class="number">50+</span>
                    <span class="label">Components</span>
                </div>
                <div class="stat">
                    <span class="number">10k+</span>
                    <span class="label">Downloads</span>
                </div>
            </div>
        </div>
    </ChildContent>
</HeroSection>

Image Configuration

Background Image Setup

<HeroSection 
    Title="Stunning Visuals"
    Subtitle="Create Beautiful Experiences"
    UseBackgroundImage="true"
    ImageUrl="/images/hero-background.jpg"
    ImageAlt="Beautiful landscape background"
    BackgroundColor="#1a1a1a"
    TextColor="white"
    BackgroundPattern="BackgroundPatternType.Dots" />

Side Image Layout

<HeroSection 
    Title="Feature Showcase"
    Summary="Detailed explanation of our key features."
    UseBackgroundImage="false"
    ImageUrl="/images/feature-screenshot.png"
    ImageAlt="Feature screenshot"
    ImagePosition="Alignment.Right" />

Metadata Display

Enable metadata display for blog posts and articles:

<HeroSection 
    Title="@article.Title"
    Summary="@article.Summary"
    ShowMetadata="true"
    Author="@article.Author"
    PublishDate="@article.PublishDate"
    ReadTime="@article.ReadTime"
    ImageUrl="@article.FeaturedImage" />

Responsive Behavior

The HeroSection component automatically adapts to different screen sizes:

• Desktop: Full layout with side-by-side content and images
• Tablet: Adjusted spacing and proportions
• Mobile: Stacked layout with optimized image sizes

Styling and Customization

CSS Custom Properties

.osirion-hero-section {
    --hero-padding-top: 4rem;
    --hero-padding-bottom: 4rem;
    --hero-title-size: 3.5rem;
    --hero-subtitle-size: 1.5rem;
    --hero-summary-size: 1.125rem;
    --hero-button-spacing: 1rem;
}

Custom CSS Classes

.custom-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.custom-hero .osirion-hero-title {
    font-weight: 800;
    letter-spacing: -0.025em;
}

.custom-hero .osirion-hero-summary {
    font-size: 1.25rem;
    opacity: 0.9;
}

Apply custom classes:

<HeroSection 
    Class="custom-hero"
    Title="Custom Styled Hero"
    Summary="This hero uses custom styling." />

Accessibility Features

The HeroSection component includes comprehensive accessibility support:

• Semantic HTML: Uses proper heading hierarchy
• Screen Reader Support: All content is accessible to screen readers
• Keyboard Navigation: Buttons are keyboard accessible
• Alt Text: Image alt attributes for screen readers
• Color Contrast: Maintains WCAG AA compliance
• Focus Management: Proper focus indicators

Best Practices

Content Guidelines

• Keep titles concise and impactful (under 10 words)
• Limit summaries to 2-3 sentences
• Use clear, action-oriented button text
• Ensure sufficient color contrast

Image Optimization

• Use high-quality images optimized for web
• Provide appropriate alt text for all images
• Consider different image sizes for responsive layouts
• Use modern image formats (WebP, AVIF) when possible

Performance Considerations

• Optimize images for fast loading
• Use lazy loading for below-fold content
• Minimize the number of custom fonts
• Consider Critical CSS for above-fold content

SEO Optimization

• Use descriptive, keyword-rich titles
• Include relevant meta descriptions
• Structure content with proper heading hierarchy
• Implement structured data when appropriate

Common Use Cases

Landing Page Hero

<HeroSection 
    Variant="HeroVariant.Hero"
    Title="Transform Your Business"
    Subtitle="With Modern Technology"
    Summary="Streamline operations and boost productivity with our innovative solutions."
    ImageUrl="/images/business-hero.jpg"
    PrimaryButtonText="Start Free Trial"
    PrimaryButtonUrl="/signup"
    SecondaryButtonText="View Demo"
    SecondaryButtonUrl="/demo" />

Product Announcement

<HeroSection 
    Variant="HeroVariant.Jumbotron"
    Title="Introducing Version 2.0"
    Subtitle="More Powerful Than Ever"
    Summary="Experience enhanced performance, new features, and improved user experience."
    UseBackgroundImage="true"
    ImageUrl="/images/product-v2-bg.jpg"
    PrimaryButtonText="Download Now"
    PrimaryButtonUrl="/download" />

Documentation Header

<HeroSection 
    Variant="HeroVariant.Minimal"
    Title="API Reference"
    Summary="Complete reference documentation for all available endpoints and methods."
    ShowMetadata="true"
    Author="Documentation Team"
    PublishDate="@DateTime.Now"
    ShowPrimaryButton="false"
    ShowSecondaryButton="false" />

Article Header

<HeroSection 
    Title="@Model.Title"
    Summary="@Model.Summary"
    ShowMetadata="true"
    Author="@Model.Author"
    PublishDate="@Model.PublishDate"
    ReadTime="@Model.ReadTime"
    ImageUrl="@Model.FeaturedImage"
    ShowPrimaryButton="false"
    ShowSecondaryButton="false"
    HasDivider="true" />

Integration Examples

With CMS Content

@if (content != null)
{
    <HeroSection 
        Title="@content.Title"
        Summary="@content.Description"
        ImageUrl="@content.FeaturedImage"
        ShowMetadata="@(content.Type == "article")"
        Author="@content.Author"
        PublishDate="@content.DateCreated"
        ReadTime="@content.ReadTime" />
}

With Analytics Tracking

<HeroSection 
    Title="Special Offer"
    Summary="Limited time promotion for new customers."
    PrimaryButtonText="Claim Offer"
    PrimaryButtonUrl="/offer"
    @onclick="TrackHeroButtonClick" />

@code {
    private void TrackHeroButtonClick()
    {
        // Analytics tracking logic
        AnalyticsService.TrackEvent("hero_button_click", new { section = "offer" });
    }
}

The HeroSection component provides a comprehensive solution for creating engaging hero sections that enhance user experience while maintaining performance and accessibility standards.