CSS-Only

Hero

Full-width landing page hero sections with flexible sizing, alignment, and background options. Perfect for marketing pages and product launches.

Example

Welcome to OmniUI

Modern, accessible, CSS-first components

Build beautiful interfaces with progressive enhancement. No JavaScript required for core functionality.

<section class="omni-hero">
  <div class="omni-hero-content">
    <h1 class="omni-hero-title">Welcome to OmniUI</h1>
    <p class="omni-hero-tagline">Modern, accessible, CSS-first components</p>
    <p class="omni-hero-description">Build beautiful interfaces with progressive enhancement.</p>
    <div class="omni-hero-actions">
      <button class="omni-button" data-variant="primary">Get Started</button>
      <button class="omni-button" data-variant-style="outline">Learn More</button>
    </div>
  </div>
</section>

Structure

The hero component uses a predictable structure with optional child elements:

<section class="omni-hero">
  <div class="omni-hero-content">
    <h1 class="omni-hero-title">Main Heading</h1>              <!-- Required -->
    <p class="omni-hero-tagline">Secondary Heading</p>         <!-- Optional -->
    <p class="omni-hero-description">Longer description</p>    <!-- Optional -->
    <div class="omni-hero-actions">                             <!-- Optional -->
      <!-- Buttons or links -->
    </div>
  </div>
</section>

Sizes

Small

Use data-size="sm" for compact hero sections (30vh minimum height):

Small Hero

Perfect for secondary pages and section headers.

<section class="omni-hero" data-size="sm">
  <div class="omni-hero-content">
    <h1 class="omni-hero-title">Small Hero</h1>
    <p class="omni-hero-description">Perfect for secondary pages.</p>
  </div>
</section>

Medium (Default)

No attribute needed. Default hero is 50vh minimum height:

Medium Hero

The default size

Balanced proportions for most landing pages and marketing sections.

Large

Use data-size="lg" for full viewport height heroes (100vh/100dvh):

<section class="omni-hero" data-size="lg">
  <div class="omni-hero-content">
    <h1 class="omni-hero-title">Large Hero</h1>
    <p class="omni-hero-tagline">Full viewport height</p>
    <p class="omni-hero-description">Maximum visual impact for homepage heroes.</p>
  </div>
</section>

Alignment

Center (Default)

Content is centered by default:

Centered Content

Text and actions are center-aligned for maximum symmetry.

Start-Aligned

Use data-align="start" for left-aligned content:

Start-Aligned Content

Better for reading flow and longer text blocks.

<section class="omni-hero" data-align="start">
  <div class="omni-hero-content">
    <h1 class="omni-hero-title">Start-Aligned Content</h1>
    <p class="omni-hero-description">Better for reading flow.</p>
    <div class="omni-hero-actions">
      <button class="omni-button" data-variant="primary">Get Started</button>
    </div>
  </div>
</section>

Backgrounds

Default Surface

Uses --omni-color-surface by default:

Surface Background

Clean, minimal default styling.

Gradient

Use data-background="gradient" for primary-to-accent gradient:

Gradient Background

Eye-catching gradient from primary to accent colors.

<section class="omni-hero" data-background="gradient">
  <div class="omni-hero-content">
    <h1 class="omni-hero-title">Gradient Background</h1>
    <p class="omni-hero-description">Eye-catching gradient.</p>
  </div>
</section>

Image with Overlay

Use data-background="overlay" with inline background-image for dark overlay:

Image with Overlay

Dark overlay ensures text remains readable over any background image.

<section class="omni-hero"
         data-background="overlay"
         style="background-image: url('/path/to/image.jpg')">
  <div class="omni-hero-content">
    <h1 class="omni-hero-title">Image with Overlay</h1>
    <p class="omni-hero-description">Dark overlay ensures readability.</p>
  </div>
</section>

Image Only

Use data-background="image" for image without overlay (ensure good contrast):

Image Background

Without overlay - ensure your image has sufficient contrast.

<section class="omni-hero"
         data-background="image"
         style="background-image: url('/path/to/image.jpg')">
  <div class="omni-hero-content">
    <h1 class="omni-hero-title">Image Background</h1>
    <p class="omni-hero-description">Ensure image has enough contrast.</p>
  </div>
</section>

Combined Examples

Large Left-Aligned with Gradient

<section class="omni-hero" data-size="lg" data-align="start" data-background="gradient">
  <div class="omni-hero-content">
    <h1 class="omni-hero-title">Ship Faster</h1>
    <p class="omni-hero-tagline">Build modern UIs in minutes, not hours</p>
    <p class="omni-hero-description">
      OmniUI provides battle-tested components that work without JavaScript.
      Progressive enhancement means better performance and reliability.
    </p>
    <div class="omni-hero-actions">
      <button class="omni-button" data-variant="secondary" data-variant-style="soft" data-size="lg">
        Get Started
      </button>
      <button class="omni-button" data-variant="secondary" data-variant-style="ghost" data-size="lg">
        View Docs
      </button>
    </div>
  </div>
</section>

Small Center-Aligned Section Header

<section class="omni-hero" data-size="sm">
  <div class="omni-hero-content">
    <h2 class="omni-hero-title">Features</h2>
    <p class="omni-hero-description">
      Everything you need to build modern web applications.
    </p>
  </div>
</section>

API Reference

Container Attributes

Attribute Values Default Description
data-size sm, md, lg md Hero height: sm (30vh), md (50vh), lg (100vh)
data-align center, start center Content alignment
data-background image, gradient, overlay — Background style treatment

Child Elements

Class Element Required Description
.omni-hero-content div Yes Content container (max-width: 48rem)
.omni-hero-title h1, h2 Yes Main heading (fluid size: 2rem–3.5rem)
.omni-hero-tagline p No Secondary heading (fluid size: 1.125rem–1.5rem)
.omni-hero-description p No Body text (1.125rem)
.omni-hero-actions div No CTA button container

Accessibility

  • Use <section> with aria-labelledby pointing to the heading
  • Use <h1> for main page hero, <h2> for secondary heroes
  • Ensure sufficient color contrast (WCAG AA minimum 4.5:1 for text)
  • Use data-background="overlay" with images to ensure text readability
  • Gradient and overlay backgrounds automatically set inverse text colors
  • Fluid typography scales gracefully across all viewport sizes
  • Respects prefers-reduced-motion for background effects
  • Responsive: stacks buttons vertically on mobile (≤640px)

Best Practices

  • Heading hierarchy: Use <h1> only once per page (main hero)
  • Content length: Keep descriptions concise (1-2 sentences)
  • CTA buttons: Limit to 1-2 primary actions in hero-actions
  • Background images: Always test contrast, prefer overlay for safety
  • Size selection: Use lg for homepage, md for landing pages, sm for section headers
  • Alignment: Center for marketing, start for content-heavy pages
  • Image optimization: Use responsive images and modern formats (WebP, AVIF)

Components Used

Other OmniUI components demonstrated on this page:

Button