Full Screen
Full Hero with Parallax
100% viewport height with image background and parallax scrolling effect
Perfect for interior page headers and section intros
Use data-hero-size="sm" for compact page headers. Great for blog posts, documentation, and interior pages.
The default size - balanced for most use cases
Use data-hero-size="md" (default) for landing pages and feature sections. Takes up half the viewport.
Content aligned to the left, with space for media on the right
Media Slot
(Image, Video, or Component)
Use data-hero-size="lg" with data-hero-layout="split-left" for product showcases and feature highlights.
100% viewport height with image background and parallax scrolling effect
Use data-hero-size="full" with data-hero-parallax for immersive landing pages. The scroll indicator guides users.
The typewriter effect adds an engaging, dynamic feel to your headlines
Add data-hero-typewriter to any heading for an animated typing effect. Respects reduced motion preferences.
Subtle, shifting colors create visual interest without distraction
Use data-hero-bg="gradient-animated" for a subtle, animated background. Animation pauses for reduced motion.
Use light overlays when you need dark text over images
Use data-overlay="light" when you need dark text over light backgrounds. Adjust opacity with data-overlay-opacity.
Media on Left
Content on Right
Media on the left, content on the right - great for variation
Use data-hero-layout="split-right" to position content on the right and media on the left.
