Hero & Jumbotron

Bold, full-width promotional sections for landing pages, marketing campaigns, and product announcements with prominent titles, subtitles, and call-to-action buttons.

Basic Hero

Simple centered hero section with a large title, subtitle, and two CTA buttons. The base .hu-hero class provides padding and text alignment.

Centered Hero

Welcome to Nimbus

A modern CSS framework designed for hosting control panels, dashboards, and service pages.

Get Started View Docs

HTML

<div class="hu-hero">
    <h1 class="hu-hero-title">Welcome to Nimbus</h1>
    <p class="hu-hero-subtitle">A modern CSS framework designed for hosting.</p>
    <div class="hu-hero-actions">
        <a href="#" class="hu-btn hu-btn-primary hu-btn-lg" style="color: white;">Get Started</a>
        <a href="#" class="hu-btn hu-btn-outline hu-btn-lg" style="color: var(--hu-primary); border-color: var(--hu-primary);">View Docs</a>
    </div>
</div>

Large Hero

Hero with extra padding using .hu-hero-lg for more visual impact on landing pages and hero banners.

Large Hero Section

Scale Your Infrastructure

High-performance cloud hosting with automatic scaling, load balancing, and enterprise-grade security.

Start Free Trial

HTML

<div class="hu-hero hu-hero-lg">
    <h1 class="hu-hero-title">Scale Your Infrastructure</h1>
    <p class="hu-hero-subtitle">High-performance cloud hosting with automatic scaling.</p>
    <div class="hu-hero-actions">
        <a href="#" class="hu-btn hu-btn-primary hu-btn-lg" style="color: white;">Start Free Trial</a>
    </div>
</div>

Hero with Background

Hero with a gradient or colored background to create visual emphasis. Apply inline styles or custom classes for background colors.

Gradient Background

Fast, Reliable Web Hosting

99.99% uptime guarantee with 24/7 expert support and free SSL on every plan.

View Plans Learn More

HTML

<div class="hu-hero" style="background: linear-gradient(135deg, var(--hu-primary), #1e40af); color: white;">
    <h1 class="hu-hero-title" style="color: white;">Fast, Reliable Web Hosting</h1>
    <p class="hu-hero-subtitle" style="color: rgba(255,255,255,0.9);">99.99% uptime guarantee.</p>
    <div class="hu-hero-actions">
        <a href="#" class="hu-btn hu-btn-lg" style="background: white; color: var(--hu-primary);">View Plans</a>
        <a href="#" class="hu-btn hu-btn-lg" style="color: white;">Learn More</a>
    </div>
</div>

Hero Left-Aligned

Hero with text left-aligned instead of centered. Use .hu-hero-muted for the subtitle to soften its appearance.

Left-Aligned Hero

Deploy in Seconds

Push your code and let our infrastructure handle the rest. Automatic builds, staging environments, and one-click rollbacks.

Start Building Watch Demo

HTML

<div class="hu-hero" style="text-align: left;">
    <h1 class="hu-hero-title">Deploy in Seconds</h1>
    <p class="hu-hero-subtitle hu-hero-muted">Push your code and let our infrastructure handle the rest.</p>
    <div class="hu-hero-actions">
        <a href="#" class="hu-btn hu-btn-primary" style="color: white;">Start Building</a>
        <a href="#" class="hu-btn hu-btn-ghost" style="color: var(--hu-primary);">Watch Demo</a>
    </div>
</div>

Basic Jumbotron

Jumbotron with a gradient background, title, subtitle, and action buttons. Jumbotrons are larger, more prominent promotional sections.

Jumbotron with Gradient

Powerful VPS Solutions

Full root access, NVMe storage, and unmetered bandwidth. Deploy your server in under 60 seconds.

Configure Server Compare Plans

HTML

<div class="hu-jumbotron" style="background: linear-gradient(135deg, var(--hu-info-light), var(--hu-primary-light)); color: var(--hu-text);">
    <h2 class="hu-jumbotron-title">Powerful VPS Solutions</h2>
    <p class="hu-jumbotron-subtitle">Full root access, NVMe storage, and unmetered bandwidth.</p>
    <div class="hu-jumbotron-actions">
        <a href="#" class="hu-btn hu-btn-primary hu-btn-lg" style="color: white;">Configure Server</a>
        <a href="#" class="hu-btn hu-btn-outline hu-btn-lg" style="color: var(--hu-primary); border-color: var(--hu-primary);">Compare Plans</a>
    </div>
</div>

Large Jumbotron

Jumbotron with extra padding using .hu-jumbotron-lg for maximum visual impact on landing pages.

Large Jumbotron

50% Off First Month

Limited time offer. Get started with any shared hosting plan and save 50% on your first month. No credit card required.

Claim Offer View Terms

HTML

<div class="hu-jumbotron hu-jumbotron-lg" style="background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #14532d;">
    <h2 class="hu-jumbotron-title">50% Off First Month</h2>
    <p class="hu-jumbotron-subtitle">Limited time offer. Get started with any shared hosting plan.</p>
    <div class="hu-jumbotron-actions">
        <a href="#" class="hu-btn hu-btn-primary hu-btn-lg" style="color: white;">Claim Offer</a>
        <a href="#" class="hu-btn hu-btn-ghost hu-btn-lg" style="color: #14532d;">View Terms</a>
    </div>
</div>

Real-World Examples

Real-world hero and jumbotron patterns commonly used in marketing pages and landing pages.

Main Landing Hero

Fast, Reliable Web Hosting

Everything you need to build, deploy, and scale your websites. Powered by enterprise hardware with a 99.99% uptime SLA.

Get Started Free View Plans

HTML

<div class="hu-hero hu-hero-lg" style="background: linear-gradient(135deg, #0f172a, #1e293b); color: white;">
    <h1 class="hu-hero-title" style="color: white; font-size: 2.5rem;">Fast, Reliable Web Hosting</h1>
    <p class="hu-hero-subtitle" style="color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto;">
        Everything you need to build, deploy, and scale your websites.
    </p>
    <div class="hu-hero-actions">
        <a href="#" class="hu-btn hu-btn-lg" style="background: white; color: #0f172a;">Get Started Free</a>
        <a href="#" class="hu-btn hu-btn-lg" style="border-color: rgba(255,255,255,0.3); color: white;">View Plans</a>
    </div>
</div>

VPS Hosting Jumbotron

New

Powerful VPS Solutions

High-performance virtual private servers with NVMe storage, dedicated resources, and full root access. Starting at $4.99/mo.

Configure VPS Compare Specs

HTML

<div class="hu-jumbotron" style="background: linear-gradient(135deg, var(--hu-primary-light), var(--hu-info-light)); border-left: 4px solid var(--hu-primary); color: var(--hu-text);">
    <div style="display: flex; align-items: center; gap: var(--hu-space-3); margin-bottom: var(--hu-space-3);">
        <svg ...>...</svg>
        <span class="hu-badge hu-badge-primary">New</span>
    </div>
    <h2 class="hu-jumbotron-title">Powerful VPS Solutions</h2>
    <p class="hu-jumbotron-subtitle">High-performance virtual private servers with NVMe storage.</p>
    <div class="hu-jumbotron-actions">
        <a href="#" class="hu-btn hu-btn-primary" style="color: white;">Configure VPS</a>
        <a href="#" class="hu-btn hu-btn-outline" style="color: var(--hu-primary); border-color: var(--hu-primary);">Compare Specs</a>
    </div>
</div>

Promo/Sale Jumbotron

Limited Time

50% Off First Month

Claim 50% Off View All Plans

HTML

<div class="hu-jumbotron hu-jumbotron-lg" style="background: linear-gradient(135deg, #fef3c7, #fde68a); text-align: center;">
    <div style="margin-bottom: var(--hu-space-3);">
        <span class="hu-badge hu-badge-primary">Limited Time</span>
    </div>
    <h2 class="hu-jumbotron-title" style="color: #451a03;">50% Off First Month</h2>
    <p class="hu-jumbotron-subtitle" style="color: #78350f;">Sign up today and save 50%.</p>
    <div class="hu-jumbotron-actions">
        <a href="#" class="hu-btn hu-btn-lg" style="background: #92400e; color: white;">Claim 50% Off</a>
        <a href="#" class="hu-btn hu-btn-lg" style="border-color: #92400e; color: #78350f;">View All Plans</a>
    </div>
</div>

API Reference

Complete list of CSS classes available for hero and jumbotron components.

Class	Description
`.hu-hero`	Base hero container with centered text, padding, and max-width constraint.
`.hu-hero-lg`	Large hero variant with increased vertical padding for landing pages.
`.hu-hero-title`	Large heading text with bold weight and bottom margin.
`.hu-hero-subtitle`	Secondary description text below the title with muted color.
`.hu-hero-actions`	Button group container with flex layout and gap spacing.
`.hu-hero-muted`	Muted subtitle variant with lighter text color for subtle descriptions.
`.hu-jumbotron`	Base jumbotron container with padding, border-radius, and background.
`.hu-jumbotron-lg`	Large jumbotron variant with extra vertical padding for promotional content.
`.hu-jumbotron-title`	Heading text for jumbotron with bold weight and bottom margin.
`.hu-jumbotron-subtitle`	Secondary description text with muted color and max-width.
`.hu-jumbotron-actions`	Button group container with flex layout and gap spacing.