01 · Layout

Bold copy, big video, side by side.

Bold copy on the left, a looping video on the right and a soft brand shape behind. Scroll down to watch the video grow and dock across the screen.

  • Layout: Video right
  • Background: Shape
  • Dock on scroll
Flex Hero Banner · Live demo
02 · Layout

Flip the layout, video on the left.

Flip the layout with one setting to put the media first.

  • Layout: Video left
  • Background: Shape
Flex Hero Banner · Live demo
03 · Layout

Stack it up, video rising from below.

Centred copy on top with the video rising from below the fold, then docking as you scroll.

  • Layout: Stacked
  • Dock on scroll
Flex Hero Banner · Live demo
04 · Layout

Add depth with a 3D tilt.

Lean the stacked video back in perspective with a gentle float. It straightens out as it docks.

  • Layout: Stacked
  • 3D tilt
  • Gentle float
Flex Hero Banner · Live demo
05 · Background

Set the mood with a video background.

Play a video behind the whole hero, add a gradient overlay and switch on light text for contrast.

  • Background: Video
  • Overlay: Gradient
  • Light text
Flex Hero Banner · Live demo
06 · Background

Text only, over any image.

Turn the media off for a clean, centred hero over a photo with a solid overlay.

  • Media: Off
  • Background: Image
  • Overlay: Solid
07 · Background

Clean and simple, on a gradient.

Two colours and a direction, from linear to radial, with no image needed.

  • Media: Off
  • Background: Gradient
08 · Brand

Your brand, your fonts.

Switch theme styles off to set your own accent colour and Google Fonts, here with a rounded shape.

  • Theme styles: Off
  • Custom accent
  • Custom fonts
  • Rounded shape
Flex Hero Banner · Live demo
09 · Media

Any colour, plus a video lightbox.

Any background colour, plus a play button that opens your full video in a lightbox.

  • Background: Solid colour
  • Play button: Lightbox
  • Custom accent
Flex Hero Banner · Live demo