Hero Component

Premium, accessible hero sections with multiple layouts and effects

Quick Start

1

Include the CSS and JavaScript

Required Files • HTML
<link rel="stylesheet" href="styles/hero.css">
<script src="javascript/hero.js"></script>
2

Create a Basic Hero

Basic Hero • HTML
<section class="rsl-hero" data-hero-size="lg" data-hero-layout="center" aria-labelledby="hero-title">
    <div class="rsl-hero-inner">
        <div class="rsl-hero-content">
            <span class="rsl-hero-eyebrow">
                <i class="fas fa-star"></i> New Release
            </span>
            <h1 id="hero-title" class="rsl-hero-heading">
                Build Beautiful Websites
            </h1>
            <p class="rsl-hero-subheading">
                Create stunning, accessible hero sections with RSL's flexible component.
            </p>
            <div class="rsl-hero-actions">
                <a href="#" class="btn btn-primary">Get Started</a>
                <a href="#" class="btn btn-outline">Learn More</a>
            </div>
        </div>
    </div>
</section>
That's it! The hero will automatically initialize with parallax effects, keyboard navigation, and proper ARIA attributes.

Size Variants

Control the hero height with the data-hero-size attribute.

Attribute Value Height Use Case
data-hero-size="sm" 200px Page headers, documentation pages
data-hero-size="md" 50vh (default) Standard landing sections
data-hero-size="lg" 80vh Prominent landing pages
data-hero-size="full" 100vh Full-screen dramatic heroes

Layout Variants

Choose how content is arranged with data-hero-layout.

Attribute Value Description
data-hero-layout="center" Centered content (default)
data-hero-layout="split-left" Media on left, content on right
data-hero-layout="split-right" Content on left, media on right

Split Layout Example

Split Layout • HTML
<section class="rsl-hero" data-hero-size="lg" data-hero-layout="split-right">
    <div class="rsl-hero-inner">
        <div class="rsl-hero-content">
            <h1 class="rsl-hero-heading">Your Heading</h1>
            <p class="rsl-hero-subheading">Description text</p>
            <div class="rsl-hero-actions">
                <a href="#" class="btn btn-primary">Action</a>
            </div>
        </div>
        <div class="rsl-hero-media">
            <img src="your-image.jpg" alt="Description">
        </div>
    </div>
</section>

Background Variants

Set the background style with data-hero-bg.

Attribute Value Description
data-hero-bg="gradient" Default purple gradient
data-hero-bg="gradient-dark" Dark blue gradient
data-hero-bg="gradient-warm" Pink to red gradient
data-hero-bg="gradient-cool" Blue to cyan gradient
data-hero-bg="gradient-nature" Teal to green gradient
data-hero-bg="gradient-sunset" Pink to yellow gradient
data-hero-bg="image" Background image
data-hero-bg="video" Video background
data-hero-bg="solid" Solid color (use CSS variable)
data-hero-bg="none" Transparent background

Image Background with Overlay

Image Background • HTML
<section class="rsl-hero" data-hero-size="full" data-hero-bg="image" data-hero-overlay="dark">
    <div class="rsl-hero-background">
        <img src="hero-bg.jpg" alt="">
    </div>
    <div class="rsl-hero-overlay"></div>
    <div class="rsl-hero-inner">
        <div class="rsl-hero-content">
            <!-- Content here -->
        </div>
    </div>
</section>

Overlay Options

Attribute Values Description
data-hero-overlay light, dark, gradient Overlay type for text contrast
data-hero-overlay-opacity 25, 50, 75, 90 Overlay opacity percentage

Premium Effects

Attribute Description
data-hero-parallax Enable parallax scrolling on background
data-hero-parallax-speed="0.5" Parallax speed (0.1 - 1.0)
data-hero-animate-bg Animate gradient background
data-hero-animate-in Fade-in animation on load
data-hero-typewriter Typewriter effect on element text
Accessibility Note: All animations respect prefers-reduced-motion. Users who prefer reduced motion will see static content instead.

Content Elements

Class Description
.rsl-hero-eyebrow Small badge/label above heading
.rsl-hero-heading Main h1 title
.rsl-hero-heading-accent Gradient text accent (wrap words)
.rsl-hero-subheading Description paragraph
.rsl-hero-actions Container for CTA buttons
.rsl-hero-features Feature icons grid
.rsl-hero-media Image container for split layouts
.rsl-hero-scroll Scroll indicator button

JavaScript API

Method Description
RSL.Hero.init() Initialize all heroes on page
RSL.Hero.create(element, options) Initialize a specific hero
RSL.Hero.destroy(element) Remove hero functionality
RSL.Hero.refresh() Reinitialize all heroes
RSL.Hero.scrollToNext(element) Scroll to next section

JSON Layout API V2

Create Hero sections programmatically using the JSON Layout API V2. This allows you to generate hero sections dynamically from JavaScript or server-side data.

V2 Content Type: The Hero component is available as a native V2 content type with type: "hero".

Basic Example

JSON API Hero • JavaScript
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: 'my-hero',
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: 'hero',
            size: 'lg',
            background: 'gradient',
            eyebrow: 'Welcome',
            eyebrowIcon: 'fas fa-rocket',
            heading: 'Build Beautiful Layouts',
            subheading: 'Create stunning hero sections programmatically.',
            buttons: [
                { text: 'Get Started', href: '#', variant: 'primary', icon: 'fas fa-arrow-right' },
                { text: 'Learn More', href: '#', variant: 'outline' }
            ]
        }
    }]
});

Configuration Options

Property Type Description
size string sm, md, lg, full
layout string center, split-left, split-right
background string Background type (see Background Variants section)
backgroundImage string Image URL for image backgrounds
overlay string dark, light, gradient
overlayOpacity number 25, 50, 75, 90
eyebrow string Small badge text above heading
eyebrowIcon string FontAwesome icon class
heading string Main heading (HTML supported)
subheading string Description text
buttons array Array of {text, href, variant, icon}
features array Array of {icon, text}
parallax boolean Enable parallax effect
animateBg boolean Enable animated gradient
animateIn boolean Enable fade-in animation
textShadow boolean Add text shadow for readability
scrollIndicator boolean Show scroll indicator

View Full JSON API Examples

Accessibility

The Hero component is built with accessibility as a core feature:

WCAG 2.1 AA Compliant: Contrast ratios meet 4.5:1 minimum when using provided overlay options.

CSS Variables

Customize the hero with these CSS custom properties:

Customization • CSS
:root {
    --rsl-hero-height-sm: 200px;
    --rsl-hero-height-md: 50vh;
    --rsl-hero-height-lg: 80vh;
    --rsl-hero-height-full: 100vh;
    --rsl-hero-padding-x: 2rem;
    --rsl-hero-padding-y: 3rem;
    --rsl-hero-content-max-width: 800px;
    --rsl-hero-heading-size: clamp(2rem, 5vw, 4rem);
    --rsl-hero-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Next Steps

See Examples

View examples.html for comprehensive demos

Try the Playground

Test features in playground.html

Explore Components

Browse all RSL components