Jumbotrons are large hero sections designed to showcase key content, announcements, or calls-to-action. They're perfect for landing pages, marketing content, and feature highlights. Domma's Jumbotron is a CSS-only component requiring no JavaScript.

Key Features

• CSS-Only - No JavaScript required
• Theme Variants - Default, dark, and primary gradient
• Background Images - Support for hero images with overlay
• Size Options - Small, default, and large padding
• Flexible Layout - Left-aligned or centred content
• Responsive - Mobile-optimised typography and spacing

Basic Usage

<div class="jumbotron">
    <div class="jumbotron-content">
        <h1 class="jumbotron-title">Welcome</h1>
        <p class="jumbotron-subtitle">Subtitle text</p>
        <div class="jumbotron-actions">
            <button class="btn btn-primary btn-lg">Get Started</button>
        </div>
    </div>
</div>

Basic Jumbotron

Primary Gradient (Centred)

Dark Theme

With Background Image

Size Variants

Create modern text + image hero sections with CSS Grid. Split layouts automatically stack on mobile and display side-by-side on desktop (768px+).

Basic Split (50/50)

Reversed Split

Asymmetric Splits

Multiple overlay variants for better contrast control on background images. Choose light overlays for dark images, dark overlays for bright images, or gradient overlays for fade effects.

Light Overlay

Dark Overlay

Darker Overlay

Gradient Overlay (Bottom-Up)

Gradient Overlay (Top-Down)

Small notification badges to highlight announcements, new releases, or special features above your main hero heading.

Primary Badge

Badge with Icon

Badge Variants

Advanced responsive behaviors using CSS clamp for fluid typography and conditional display utilities for mobile/desktop content.

Responsive Typography

Conditional Display

8 modern gradient backgrounds beyond the default primary gradient, perfect for creating visually stunning hero sections.

• Above the Fold - Place jumbotrons at top of page for maximum impact
• Clear CTA - Include obvious call-to-action buttons
• Contrast - Ensure text is readable against background (4.5:1 ratio minimum)
• Mobile Responsive - Test on mobile devices for proper text sizing
• Image Optimisation - Compress background images for fast loading

While jumbotrons work perfectly as CSS-only components, you can enhance them with JavaScript for dynamic content, animations, and interactivity using Domma's declarative configuration.

Dynamic Content Updates

// Rotate through multiple messages
$.setup({
    '#hero-jumbotron': {
        initial: {
            data: {
                messages: [
                    { title: 'Launch Your Project', subtitle: 'Build amazing apps with Domma' },
                    { title: 'Ship Faster', subtitle: 'Zero dependencies, maximum productivity' },
                    { title: 'Scale Confidently', subtitle: 'Lightweight and performant' }
                ],
                currentIndex: 0
            }
        },
        events: {
            ready: (e, $el) => {
                const data = $el.data();
                setInterval(() => {
                    data.currentIndex = (data.currentIndex + 1) % data.messages.length;
                    const msg = data.messages[data.currentIndex];

                    $el.find('.jumbotron-title').fadeOut(300, function() {
                        $(this).text(msg.title).fadeIn(300);
                    });
                    $el.find('.jumbotron-subtitle').fadeOut(300, function() {
                        $(this).text(msg.subtitle).fadeIn(300);
                    });
                }, 4000);
            }
        }
    }
});

Scroll-Based Animations

// Animate jumbotron on scroll into view
$.setup({
    '.jumbotron': {
        initial: {
            css: { opacity: 0, transform: 'translateY(30px)' }
        },
        events: {
            ready: (e, $el) => {
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            $el.animate({
                                opacity: 1,
                                transform: 'translateY(0)'
                            }, 800);
                            observer.unobserve(entry.target);
                        }
                    });
                });
                observer.observe($el.get(0));
            }
        }
    }
});

Interactive CTA Tracking

// Track user interactions with analytics
$.setup({
    '#marketing-hero': {
        events: {
            'click .btn-primary': (e, $el) => {
                const title = $el.find('.jumbotron-title').text();

                // Track with analytics
                if (typeof analytics !== 'undefined') {
                    analytics.track('Jumbotron CTA Clicked', {
                        hero: title,
                        button: $(e.target).text()
                    });
                }

                // Show feedback
                Domma.elements.toast.success('Thanks for your interest!');
            },
            'mouseenter': (e, $el) => {
                $el.find('.jumbotron-actions .btn').addClass('pulse');
            },
            'mouseleave': (e, $el) => {
                $el.find('.jumbotron-actions .btn').removeClass('pulse');
            }
        }
    }
});

Personalised Content

// Customise jumbotron based on user data
const user = { name: 'Alice', plan: 'Pro' };

$.setup({
    '#dashboard-hero': {
        initial: {
            html: (el) => {
                const $content = $(el).find('.jumbotron-content');
                $content.find('.jumbotron-title').text(`Welcome back, ${user.name}!`);
                $content.find('.jumbotron-subtitle').text(`You're on the ${user.plan} plan`);

                if (user.plan === 'Free') {
                    $content.find('.jumbotron-actions').html(`
                        <button class="btn btn-primary btn-lg">Upgrade to Pro</button>
                    `);
                }
            }
        }
    }
});

Benefits of Hybrid Approach

• Performance - CSS handles layout/styling instantly, JS adds interactivity only when needed
• Progressive Enhancement - Works without JS, enhanced with JS
• Maintainability - Centralised configuration for all dynamic behaviour
• Flexibility - Mix static and dynamic content as needed

CSS-Only vs CSS+JS Hybrid

    

        

            Static Title
        
        

            Static subtitle
        
        

            
                Click Me
            
        
    

    

        

            Dynamic Title
        
        

            Dynamic subtitle
        
        

            
                Click Me