Skip to main content

Hero Sections

Hero sections are full-width, high-impact banners designed for the top of your pages. Wave includes 7 hero section variants, each with a different layout and visual style.

Slideshow​

The standard full-width banner carousel with multiple slides, navigation controls, and overlay content.

section-hero-banner.webp

Features:

  • Multiple slides with carousel navigation (arrows and pagination)
  • Background image or video per slide
  • Overlay text with heading, subheading, and buttons
  • Navigation buttons positioned at middle or bottom
  • Responsive height controls
  • Animation effects

Slider Showcase​

A full-screen carousel with automatic pagination and minimal navigation UI.

section-hero-banner-2.webp

Features:

  • Full-screen carousel layout
  • Dot pagination at bottom-right
  • Auto-playing slides
  • Clean, minimal navigation

Split Showcase​

A side-by-side split hero with content on one side and media on the other. Limited to 2 blocks for a focused layout.

section-hero-banner-3.webp

Features:

  • Two-column split layout (max 2 blocks)
  • Responsive direction (stacks on mobile)
  • Content and media side by side
  • Clean, balanced composition

Image Banner​

A hero combining text content with a featured product card, using a grid-based layout with parallax effects.

section-hero-banner-4.webp

Features:

  • Grid layout with content and product card
  • Parallax scroll animations
  • Decorative shape blocks
  • Product card with add-to-cart functionality

Hero with Large Heading​

A tall hero section featuring oversized parallax heading text alongside a product display.

section-hero-banner-5.webp

Features:

  • Large animated heading text with parallax scroll
  • Product display on the side
  • Extra-tall viewport height (120vh–150vh)
  • Bold typographic impact

Hero Banner with Marquee​

A carousel hero with full-height edge navigation zones spanning the left and right sides.

section-hero-banner-6.webp

Features:

  • Carousel with edge-mounted navigation
  • Navigation buttons span full height on sides
  • Optional navigation enable/disable
  • Marquee text effects

Hero Image with Text​

A simpler hero with a large image and adjacent text content, without the full-width background approach.

section-hero-image-text.webp

Features:

  • Side-by-side image and text layout
  • Customizable image position (left or right)
  • Clean, minimal design
  • Suitable for landing pages and about pages