Basic Centered Hero

The simplest hero configuration with centered content and gradient background.

Launch Ready

Build Something Amazing

Create stunning websites with RSL's accessible, zero-dependency framework. Get started in minutes.

Get Started Documentation

<section class="rsl-hero" data-hero-size="md" data-hero-layout="center" data-hero-animate-in>
    <div class="rsl-hero-inner">
        <div class="rsl-hero-content">
            <span class="rsl-hero-eyebrow">
                <i class="fas fa-rocket"></i> Launch Ready
            </span>
            <h1 class="rsl-hero-heading">
                Build Something <span class="rsl-hero-heading-accent">Amazing</span>
            </h1>
            <p class="rsl-hero-subheading">
                Create stunning websites with RSL's accessible, zero-dependency framework.
            </p>
            <div class="rsl-hero-actions">
                <a href="#" class="btn btn-primary">Get Started</a>
                <a href="#" class="btn btn-outline">Documentation</a>
            </div>
        </div>
    </div>
</section>

Split Layout Hero

Content on one side with an image on the other. Perfect for product showcases.

Powerful Features,
Simple Design

Our intuitive interface makes complex tasks simple. Built for developers who value clarity and efficiency.

Watch Demo Learn More

Lightning Fast

Secure

Accessible

<section class="rsl-hero" data-hero-size="lg" data-hero-layout="split-right" data-hero-bg="gradient-cool">
    <div class="rsl-hero-inner">
        <div class="rsl-hero-content">
            <span class="rsl-hero-eyebrow">Featured Product</span>
            <h1 class="rsl-hero-heading">Powerful Features, Simple Design</h1>
            <p class="rsl-hero-subheading">Description text here...</p>
            <div class="rsl-hero-actions">
                <a href="#" class="btn btn-primary">Watch Demo</a>
            </div>
            <div class="rsl-hero-features">
                <div class="rsl-hero-feature">
                    <div class="rsl-hero-feature-icon"><i class="fas fa-bolt"></i></div>
                    <span class="rsl-hero-feature-text">Lightning Fast</span>
                </div>
            </div>
        </div>
        <div class="rsl-hero-media">
            <img src="your-image.jpg" alt="Description">
        </div>
    </div>
</section>

Image Background with Overlay

Full-width image background with a dark overlay for text contrast.

Photography Studio

Capturing Life's Beautiful Moments

Professional photography services for weddings, portraits, and special events. Let us tell your story through stunning imagery.

Book a Session View Portfolio

<section class="rsl-hero rsl-hero-text-shadow"
         data-hero-size="lg"
         data-hero-bg="image"
         data-hero-overlay="dark"
         data-hero-parallax>
    <div class="rsl-hero-background">
        <img src="hero-background.jpg" alt="">
    </div>
    <div class="rsl-hero-overlay"></div>
    <div class="rsl-hero-inner">
        <div class="rsl-hero-content">
            <!-- Content here -->
        </div>
    </div>
    <button class="rsl-hero-scroll">
        <div class="rsl-hero-scroll-icon"></div>
        <span>Scroll</span>
    </button>
</section>

Gradient Variants

Choose from multiple pre-built gradient backgrounds.

Warm Gradient

gradient-warm

Nature Gradient

gradient-nature

Sunset Gradient

gradient-sunset

Dark Gradient

gradient-dark

Animated Gradient Background

Add subtle animation to the gradient background for a dynamic effect.

Premium Experience

Watch the Gradient Flow

This hero features an animated gradient that shifts smoothly. The animation respects user preferences for reduced motion.

Experience More

<section class="rsl-hero" data-hero-size="md" data-hero-bg="gradient" data-hero-animate-bg>
    <!-- Content -->
</section>

Small Page Header

Compact hero for documentation pages and inner pages.

Documentation

Everything you need to build with RSL

<section class="rsl-hero" data-hero-size="sm" data-hero-bg="gradient-dark">
    <div class="rsl-hero-inner">
        <div class="rsl-hero-content">
            <h1 class="rsl-hero-heading">Documentation</h1>
            <p class="rsl-hero-subheading">Everything you need to build with RSL</p>
        </div>
    </div>
</section>

Light Overlay

Use a light overlay for dark text on image backgrounds.

Eco Friendly

Sustainable Solutions

Building a better tomorrow with environmentally conscious practices and innovative technology.

Our Mission Get Involved

<section class="rsl-hero" data-hero-size="md" data-hero-bg="image" data-hero-overlay="light">
    <div class="rsl-hero-background">
        <img src="your-image.jpg" alt="">
    </div>
    <div class="rsl-hero-overlay"></div>
    <div class="rsl-hero-inner">
        <div class="rsl-hero-content">
            <span class="rsl-hero-eyebrow">Eco Friendly</span>
            <h1 class="rsl-hero-heading">Sustainable Solutions</h1>
            <p class="rsl-hero-subheading">Your description here</p>
            <div class="rsl-hero-actions">
                <a href="#" class="btn btn-primary">Primary Action</a>
                <a href="#" class="btn btn-outline">Secondary</a>
            </div>
        </div>
    </div>
</section>

Hero Examples