Hero

Large hero sections for showcasing key content, announcements, and calls-to-action

Overview

Heroes 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 hero 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="hero">
    <div class="hero-content">
        <h1 class="hero-title">Welcome</h1>
        <p class="hero-subtitle">Subtitle text</p>
        <div class="hero-actions">
            <button class="btn btn-primary btn-lg">Get Started</button>
        </div>
    </div>
</div>

Getting Started

Add a hero section to your page in two simple steps

Step 1: Include Domma CSS

Add Domma CSS to your page:

<!-- CSS -->
<link rel="stylesheet" href="dist/domma.css">
<link rel="stylesheet" href="dist/elements.css">

Step 2: Add hero HTML

Use hero classes for hero sections:

<div class="hero">
    <div class="hero-content">
        <h1 class="hero-title">Welcome to Domma</h1>
        <p class="hero-subtitle">
            A lightweight JavaScript framework combining jQuery-style DOM,
            Lodash utilities, and modern UI components.
        </p>
        <div class="hero-actions">
            <button class="btn btn-primary btn-lg">Get Started</button>
            <button class="btn btn-outline btn-lg">Learn More</button>
        </div>
    </div>
</div>

<!-- With gradient variant -->
<div class="hero hero-gradient-primary">
    <div class="hero-content">
        <h1 class="hero-title">Gradient Hero</h1>
        <p class="hero-subtitle">Eye-catching gradient background</p>
    </div>
</div>

Note: Heroes are CSS-only components (no JavaScript required). Simply add the hero classes to your HTML. Use .hero-gradient-* for gradient variants, .hero-dark for dark theme, or .hero-sm / .hero-lg for size variations.

Quick Start

Basic hero

Hello, World!

Simple hero section for featured content

<div class="hero">
    <div class="hero-content">
        <h1 class="hero-title">Hello, World!</h1>
        <p class="hero-subtitle">Simple hero section for featured content</p>
        <div class="hero-actions">
            <button type="button" class="btn btn-primary btn-lg">Learn More</button>
        </div>
    </div>
</div>

Examples

Primary Gradient (Centred)

Launch Your Project

Build amazing applications with Domma

<div class="hero hero-primary hero-center">
    <div class="hero-content">
        <h1 class="hero-title">Launch Your Project</h1>
        <p class="hero-subtitle">Build amazing applications with Domma</p>
        <div class="hero-actions">
            <button type="button" class="btn btn-lg bg-white text-primary">Get Started
            </button>
            <button type="button" class="btn btn-outline btn-lg border-white text-white">
                Documentation
            </button>
        </div>
    </div>
</div>

Dark Theme

Dark Mode Ready

Beautiful dark theme variant

<div class="hero hero-dark">
    <div class="hero-content">
        <h1 class="hero-title">Dark Mode Ready</h1>
        <p class="hero-subtitle">Beautiful dark theme variant</p>
        <div class="hero-actions">
            <button type="button" class="btn btn-outline btn-lg border-white text-white">Explore
            </button>
        </div>
    </div>
</div>

With Background Image

Cover Image

Hero section with gradient background

<div class="hero hero-cover hero-overlay hero-center bg-gradient-blue min-h-400">
    <div class="hero-content">
        <h1 class="hero-title text-white">Cover Image</h1>
        <p class="hero-subtitle text-white-t90">Hero section with gradient
            background</p>
        <div class="hero-actions">
            <button type="button" class="btn btn-lg bg-white text-blue-400">Discover More</button>
        </div>
    </div>
</div>

Size Variants

Small hero

Compact version with less padding

Large hero

Expanded version with extra padding

<div class="hero hero-sm mb-3">
    <div class="hero-content">
        <h2 class="hero-title">Small hero</h2>
        <p class="hero-subtitle">Compact version with less padding</p>
    </div>
</div>
<div class="hero hero-lg">
    <div class="hero-content">
        <h1 class="hero-title">Large hero</h1>
        <p class="hero-subtitle">Expanded version with extra padding</p>
    </div>
</div>

Split Layouts (New)

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)

Modern Hero Layout

Split layouts combine compelling copy with visual content for maximum impact.

Product Screenshot

<div class="hero hero-split">
    <div class="hero-text">
        <h1 class="hero-title">Modern Hero Layout</h1>
        <p class="hero-subtitle">Split layouts combine compelling copy with visual content for
            maximum impact.</p>
        <div class="hero-actions">
            <button type="button" class="btn btn-primary btn-lg">Get Started</button>
            <button type="button" class="btn btn-outline btn-lg">Learn More</button>
        </div>
    </div>
    <div class="hero-media">
        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 300px; border-radius: var(--dm-radius-lg); display: flex; align-items: center; justify-content: center; color: var(--dm-white); font-size: 1.2rem;">
            Product Screenshot
        </div>
    </div>
</div>

Reversed Split

Image on Left

Use .hero-split-reverse to swap the visual and text positions.

Feature Image

<div class="hero hero-split hero-split-reverse">
    <div class="hero-text">
        <h1 class="hero-title">Image on Left</h1>
        <p class="hero-subtitle">Use .hero-split-reverse to swap the visual and text
            positions.</p>
        <div class="hero-actions">
            <button type="button" class="btn btn-primary btn-lg">Explore</button>
        </div>
    </div>
    <div class="hero-media">
        <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); height: 300px; border-radius: var(--dm-radius-lg); display: flex; align-items: center; justify-content: center; color: var(--dm-white); font-size: 1.2rem;">
            Feature Image
        </div>
    </div>
</div>

Asymmetric Splits

60/40 Split

Give more emphasis to your content with asymmetric layouts.

60/40

70/30 Split

Perfect for content-heavy heroes with small visual accents.

70/30

<div class="hero hero-split hero-split-60-40 mb-3">
    <div class="hero-text">
        <h2 class="hero-title">60/40 Split</h2>
        <p class="hero-subtitle">Give more emphasis to your content with asymmetric layouts.</p>
    </div>
    <div class="hero-media">
        <div style="background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); height: 200px; border-radius: var(--dm-radius-lg); display: flex; align-items: center; justify-content: center; color: var(--dm-white);">
            60/40
        </div>
    </div>
</div>
<div class="hero hero-split hero-split-70-30">
    <div class="hero-text">
        <h2 class="hero-title">70/30 Split</h2>
        <p class="hero-subtitle">Perfect for content-heavy heroes with small visual accents.</p>
    </div>
    <div class="hero-media">
        <div style="background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); height: 200px; border-radius: var(--dm-radius-lg); display: flex; align-items: center; justify-content: center; color: var(--dm-white);">
            70/30
        </div>
    </div>
</div>

Enhanced Overlays (New)

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

30% white overlay for dark backgrounds

<div class="hero hero-cover hero-overlay-light hero-center" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); min-height: 300px;">
    <div class="hero-content">
        <h1 class="hero-title" style="color: var(--dm-white);">Light Overlay</h1>
        <p class="hero-subtitle" style="color: var(--dm-white);">30% white overlay for dark backgrounds</p>
    </div>
</div>

Dark Overlay

60% black overlay for bright backgrounds

<div class="hero hero-cover hero-overlay-dark hero-center" style="background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); min-height: 300px;">
    <div class="hero-content">
        <h1 class="hero-title" style="color: var(--dm-white);">Dark Overlay</h1>
        <p class="hero-subtitle" style="color: var(--dm-white);">60% black overlay for bright backgrounds</p>
    </div>
</div>

Darker Overlay

80% black overlay for maximum contrast

<div class="hero hero-cover hero-overlay-darker hero-center" style="background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); min-height: 300px;">
    <div class="hero-content">
        <h1 class="hero-title" style="color: var(--dm-white);">Darker Overlay</h1>
        <p class="hero-subtitle" style="color: var(--dm-white);">80% black overlay for maximum contrast</p>
    </div>
</div>

Gradient Overlay (Bottom-Up)

Gradient Overlay

Fades from dark at bottom to transparent at top

<div class="hero hero-cover hero-overlay-gradient" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 300px; display: flex; align-items: flex-end;">
    <div class="hero-content">
        <h1 class="hero-title" style="color: var(--dm-white);">Gradient Overlay</h1>
        <p class="hero-subtitle" style="color: var(--dm-white);">Fades from dark at bottom to transparent at
            top</p>
    </div>
</div>

Gradient Overlay (Top-Down)

Reverse Gradient

Fades from dark at top to transparent at bottom

<div class="hero hero-cover hero-overlay-gradient-reverse" style="background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%); min-height: 300px; display: flex; align-items: flex-start;">
    <div class="hero-content">
        <h1 class="hero-title" style="color: var(--dm-white);">Reverse Gradient</h1>
        <p class="hero-subtitle" style="color: var(--dm-white);">Fades from dark at top to transparent at
            bottom</p>
    </div>
</div>

Announcement Badges (New)

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

Primary Badge

New Release

Domma v2.0

Enhanced hero with Tailwind-inspired utilities

<div class="hero hero-center">
    <div class="hero-content">
        <span class="hero-badge">
            New Release
        </span>
        <h1 class="hero-title">Domma v2.0</h1>
        <p class="hero-subtitle">Enhanced hero with Tailwind-inspired utilities</p>
    </div>
</div>

Badge with Icon

🎉 Now Available

Split Layouts & More

Build modern hero sections with ease

<div class="hero hero-primary hero-center">
    <div class="hero-content">
        <span class="hero-badge">
            <span class="hero-badge-icon">🎉</span>
            Now Available
        </span>
        <h1 class="hero-title">Split Layouts &amp; More</h1>
        <p class="hero-subtitle">Build modern hero sections with ease</p>
    </div>
</div>

Badge Variants

Secondary Success Warning Danger Info Outline

Badge Color Variants

Choose from multiple semantic colors

<div class="hero">
    <div class="hero-content">
        <span class="hero-badge hero-badge-secondary mb-2">Secondary</span>
        <span class="hero-badge hero-badge-success mb-2">Success</span>
        <span class="hero-badge hero-badge-warning mb-2">Warning</span>
        <span class="hero-badge hero-badge-danger mb-2">Danger</span>
        <span class="hero-badge hero-badge-info mb-2">Info</span>
        <span class="hero-badge hero-badge-outline">Outline</span>
        <h2 class="hero-title" style="margin-top: 1rem;">Badge Color Variants</h2>
        <p class="hero-subtitle">Choose from multiple semantic colors</p>
    </div>
</div>

Responsive Utilities (New)

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

Responsive Typography

Fluid Typography

Scales smoothly from mobile (2rem) to desktop (3.5rem) without breakpoints using CSS clamp

Resize browser window to see fluid scaling in action

<div class="hero hero-responsive">
    <div class="hero-content">
        <h1 class="hero-title-responsive">Fluid Typography</h1>
        <p class="hero-subtitle-responsive">Scales smoothly from mobile (2rem) to desktop (3.5rem)
            without breakpoints using CSS clamp</p>
        <p class="hero-note"><em>Resize browser window to see fluid scaling in action</em></p>
    </div>
</div>

Conditional Display

📱 Mobile Only 💻 Desktop Only

Device-Specific Content

Show/hide elements based on viewport width

.hero-hide-mobile hides below 768px, .hero-show-mobile shows below 768px

<div class="hero">
    <div class="hero-content">
        <span class="hero-badge hero-show-mobile">📱 Mobile Only</span>
        <span class="hero-badge hero-badge-success hero-hide-mobile">💻 Desktop Only</span>
        <h2 class="hero-title">Device-Specific Content</h2>
        <p class="hero-subtitle">Show/hide elements based on viewport width</p>
        <p class="hero-note"><em>.hero-hide-mobile hides below 768px, .hero-show-mobile
                shows below 768px</em></p>
    </div>
</div>

Additional Gradients (New)

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

Additional Gradients (New)

Purple Gradient

.hero-gradient-purple

Blue Gradient

.hero-gradient-blue

Green Gradient

.hero-gradient-green

Sunset Gradient

.hero-gradient-sunset

Ocean Gradient

.hero-gradient-ocean

Rose Gradient

.hero-gradient-rose

Forest Gradient

.hero-gradient-forest

Night Gradient

.hero-gradient-night

<div class="grid grid-cols-1 gap-4">
    <div class="hero hero-gradient-purple hero-center hero-sm">
        <div class="hero-content">
            <h2 class="hero-title">Purple Gradient</h2>
            <p class="hero-subtitle">.hero-gradient-purple</p>
        </div>
    </div>
    <div class="hero hero-gradient-blue hero-center hero-sm">
        <div class="hero-content">
            <h2 class="hero-title">Blue Gradient</h2>
            <p class="hero-subtitle">.hero-gradient-blue</p>
        </div>
    </div>
    <div class="hero hero-gradient-green hero-center hero-sm">
        <div class="hero-content">
            <h2 class="hero-title">Green Gradient</h2>
            <p class="hero-subtitle">.hero-gradient-green</p>
        </div>
    </div>
    <div class="hero hero-gradient-sunset hero-center hero-sm">
        <div class="hero-content">
            <h2 class="hero-title">Sunset Gradient</h2>
            <p class="hero-subtitle">.hero-gradient-sunset</p>
        </div>
    </div>
    <div class="hero hero-gradient-ocean hero-center hero-sm">
        <div class="hero-content">
            <h2 class="hero-title">Ocean Gradient</h2>
            <p class="hero-subtitle">.hero-gradient-ocean</p>
        </div>
    </div>
    <div class="hero hero-gradient-rose hero-center hero-sm">
        <div class="hero-content">
            <h2 class="hero-title">Rose Gradient</h2>
            <p class="hero-subtitle">.hero-gradient-rose</p>
        </div>
    </div>
    <div class="hero hero-gradient-forest hero-center hero-sm">
        <div class="hero-content">
            <h2 class="hero-title">Forest Gradient</h2>
            <p class="hero-subtitle">.hero-gradient-forest</p>
        </div>
    </div>
    <div class="hero hero-gradient-night hero-center hero-sm">
        <div class="hero-content">
            <h2 class="hero-title">Night Gradient</h2>
            <p class="hero-subtitle">.hero-gradient-night</p>
        </div>
    </div>
</div>

Best Practices

Above the Fold - Place heroes 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

CSS Classes

Class	Description
`.hero`	Base hero container
`.hero-primary`	Primary colour gradient background
`.hero-dark`	Dark background theme
`.hero-center`	Centre-aligned content
`.hero-cover`	Background image cover mode
`.hero-overlay`	Dark overlay for background images
`.hero-sm`	Smaller padding
`.hero-lg`	Larger padding
`.hero-content`	Content wrapper
`.hero-title`	Main heading
`.hero-subtitle`	Subtitle text
`.hero-actions`	Button container
Split Layouts (New)
`.hero-split`	Text + image split layout (50/50 on desktop, stacked on mobile)
`.hero-split-reverse`	Reversed split (image left, text right)
`.hero-split-60-40`	Asymmetric 60% / 40% split
`.hero-split-70-30`	Asymmetric 70% / 30% split
`.hero-split-40-60`	Asymmetric 40% / 60% split
`.hero-split-30-70`	Asymmetric 30% / 70% split
`.hero-text`	Text content container for split layouts
`.hero-media`	Image/media container for split layouts
Enhanced Overlays (New)
`.hero-overlay-light`	30% white overlay for dark backgrounds
`.hero-overlay-dark`	60% black overlay for bright backgrounds
`.hero-overlay-darker`	80% black overlay for maximum contrast
`.hero-overlay-gradient`	Gradient overlay (dark bottom to transparent top)
`.hero-overlay-gradient-reverse`	Gradient overlay (dark top to transparent bottom)
Announcement Badges (New)
`.hero-badge`	Primary badge (default blue)
`.hero-badge-secondary`	Secondary badge variant
`.hero-badge-success`	Success badge (green)
`.hero-badge-warning`	Warning badge (yellow)
`.hero-badge-danger`	Danger badge (red)
`.hero-badge-info`	Info badge (cyan)
`.hero-badge-outline`	Transparent badge with border
`.hero-badge-icon`	Icon/emoji wrapper for badges
Responsive Utilities (New)
`.hero-title-responsive`	Fluid title sizing (2rem to 3.5rem)
`.hero-subtitle-responsive`	Fluid subtitle sizing (1rem to 1.5rem)
`.hero-responsive`	Fluid spacing (padding scales with viewport)
`.hero-hide-mobile`	Hidden on mobile (<768px), visible on desktop
`.hero-show-mobile`	Visible on mobile, hidden on desktop
`.hero-center-mobile`	Centred on mobile, left-aligned on desktop
Gradient Variants (New)
`.hero-gradient-purple`	Purple gradient background
`.hero-gradient-blue`	Blue gradient background
`.hero-gradient-green`	Green gradient background
`.hero-gradient-sunset`	Orange-to-red gradient background
`.hero-gradient-ocean`	Cyan-blue gradient background
`.hero-gradient-rose`	Pink-red gradient background
`.hero-gradient-forest`	Green forest gradient background
`.hero-gradient-night`	Dark slate gradient background

Hybrid CSS + JavaScript

While heroes 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-hero': {
        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('.hero-title').fadeOut(300, function() {
                        $(this).text(msg.title).fadeIn(300);
                    });
                    $el.find('.hero-subtitle').fadeOut(300, function() {
                        $(this).text(msg.subtitle).fadeIn(300);
                    });
                }, 4000);
            }
        }
    }
});

Scroll-Based Animations

// Animate hero on scroll into view
$.setup({
    '.hero': {
        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('.hero-title').text();

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

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

Personalised Content

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

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

                if (user.plan === 'Free') {
                    $content.find('.hero-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

CSS-Only (Default)

    
        
            Static Title
        
        
            Static subtitle
        
        
            
                Click Me

CSS+JS Hybrid (Enhanced)

    
        
            Dynamic Title
        
        
            Dynamic subtitle
        
        
            
                Click Me
            
        
    

<script>
$.setup({
    '#hero': {
        events: {
            'click .btn': () => {
                // Analytics, animations, etc.
            }
        }
    }
});
</script>

CSS Customisation

Override these CSS variables to customise Hero appearance and match your design system.

Variable	Default	Controls
`--dm-primary`	`var(--dm-blue-600)`	Primary hero background/gradient
`--dm-text-inverse`	`var(--dm-white)`	Text on dark hero
`--dm-font-size-4xl`	`2.25rem`	Hero title size
`--dm-font-size-xl`	`1.25rem`	Hero subtitle size

Example Override

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

Full CSS Customisation Cheat-Sheet →

Related Elements

Card

Smaller content containers for page sections

Navbar

Navigation bar typically placed above hero

<div class="grid grid-cols-1 gap-4" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));"><a href="/showcase/elements/card" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Card</h3>
            <p class="card-text">Smaller content containers for page sections</p>
        </div>
    </a>
    <a href="/showcase/elements/navbar" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Navbar</h3>
            <p class="card-text">Navigation bar typically placed above hero</p>
        </div>
    </a>
</div>