Hero with Live Canvas Background & Parallax

This hero uses an animated canvas element as background and has its parallax prop set to true.

Component Docs

Hero with Specific Height & Gradient

The background can be set to a gradient, image, video, or canvas.

Component Docs

Hero with Video

This hero uses a video as its background media.

Component Docs
Triangle 01

Split Variant Default

The Split layout defaults to a 62/38 ratio, with media on top on small screens (media first in the DOM), and on the left on larger screens. You can add the contentFirst prop to change that.

Triangle 03

Split Variant (Reversed)

Adding the reversed prop visually swaps the content and media sections (without changing their position in the DOM).

Triangle 01Triangle 02Triangle 03

  • Slideshow Variant

    This is the first slide of the slideshow.

  • Each Slide has a different content & background

    This is the second slide of the slideshow.

  • Slideshow Variant

    Each slide is absolute positioned so make sure you account for the tallest slide by using the height prop.