Hero JSON API Examples

Hero Configuration Options

The Hero component supports extensive configuration through the JSON API V2:

Property	Type	Description
`size`	string	Hero height: `sm`, `md`, `lg`, `full`
`layout`	string	Layout type: `center`, `split-left`, `split-right`
`background`	string	Background type: `gradient`, `gradient-dark`, `gradient-warm`, `gradient-cool`, `gradient-nature`, `gradient-sunset`, `gradient-animated`, `image`, `video`, `solid`, `none`
`backgroundImage`	string	Image URL for image backgrounds
`overlay`	string	Overlay type: `dark`, `light`, `gradient`
`overlayOpacity`	number	Overlay opacity: `25`, `50`, `75`, `90`
`eyebrow`	string	Small text above the heading
`eyebrowIcon`	string	FontAwesome icon class for eyebrow
`heading`	string	Main heading text (supports HTML)
`subheading`	string	Description text below heading
`buttons`	array	Array of button objects: `{text, href, variant, icon}`
`features`	array	Array of feature objects: `{icon, text}`
`parallax`	boolean	Enable parallax scroll effect on background
`animateBg`	boolean	Enable animated gradient background
`animateIn`	boolean	Enable staggered fade-in animation for content
`textShadow`	boolean	Add text shadow for readability on images
`scrollIndicator`	boolean	Show animated scroll indicator

Example 1: Basic Gradient Hero

A simple hero with gradient background, heading, subheading, and call-to-action buttons.

RSL.JSONLayout.renderLayout('#demo1-output', {
    version: 2,
    layoutId: 'hero-demo-1',
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: 'hero',
            size: 'md',
            background: 'gradient',
            eyebrow: 'Welcome to RSL',
            eyebrowIcon: 'fas fa-rocket',
            heading: 'Build Beautiful Layouts',
            subheading: 'Create stunning, responsive hero sections with the JSON Layout API. Zero dependencies, fully accessible.',
            buttons: [
                { text: 'Get Started', href: '#', variant: 'primary', icon: 'fas fa-arrow-right' },
                { text: 'Learn More', href: '#', variant: 'outline' }
            ]
        }
    }]
});

Example 2: Animated Gradient with Features

Hero with animated gradient background, fade-in animation, and feature icons.

RSL.JSONLayout.renderLayout('#demo2-output', {
    version: 2,
    layoutId: 'hero-demo-2',
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: 'hero',
            size: 'lg',
            animateBg: true,
            animateIn: true,
            eyebrow: 'New in Version 2',
            eyebrowIcon: 'fas fa-sparkles',
            heading: 'Next-Level Web Development',
            subheading: 'Experience the power of programmatic UI generation with our enhanced JSON API.',
            buttons: [
                { text: 'Try It Now', href: '#', variant: 'primary', icon: 'fas fa-play' }
            ],
            features: [
                { icon: 'fas fa-bolt', text: 'Lightning Fast' },
                { icon: 'fas fa-universal-access', text: 'ADA Compliant' },
                { icon: 'fas fa-code', text: 'Zero Dependencies' }
            ],
            scrollIndicator: true
        }
    }]
});

Example 3: Image Background with Parallax

Hero with background image, gradient overlay, parallax scrolling, and text shadow for readability.

RSL.JSONLayout.renderLayout('#demo3-output', {
    version: 2,
    layoutId: 'hero-demo-3',
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: 'hero',
            size: 'lg',
            backgroundImage: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=400&fit=crop',
            overlay: 'gradient',
            overlayOpacity: 50,
            parallax: true,
            textShadow: true,
            eyebrow: 'Professional Photography',
            eyebrowIcon: 'fas fa-camera',
            heading: 'Capturing Life\'s
Beautiful Moments',
            subheading: 'Award-winning photography services for weddings, portraits, and special events.',
            buttons: [
                { text: 'Book a Session', href: '#', variant: 'primary', icon: 'fas fa-calendar' },
                { text: 'View Portfolio', href: '#', variant: 'outline', icon: 'fas fa-images' }
            ],
            scrollIndicator: true
        }
    }]
});

Example 4: Gradient Variants

The Hero component includes several pre-built gradient options. Click each button to see different gradient styles.

// Available gradient options:
// 'gradient', 'gradient-dark', 'gradient-warm',
// 'gradient-cool', 'gradient-nature', 'gradient-sunset'

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: 'hero-demo-4',
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: 'hero',
            size: 'sm',
            background: 'gradient-warm', // Change this value
            heading: 'Gradient Variants',
            subheading: 'Choose from multiple pre-built gradient options'
        }
    }]
});

Example 5: Small Page Header

A compact hero suitable for page headers and section introductions.

RSL.JSONLayout.renderLayout('#demo5-output', {
    version: 2,
    layoutId: 'hero-demo-5',
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: 'hero',
            size: 'sm',
            background: 'gradient-dark',
            heading: 'Documentation',
            subheading: 'Everything you need to get started with RSL'
        }
    }]
});