Referensi visual untuk semua variant layout Hero section. Scroll ke bawah untuk melihat setiap layout dalam ukuran full-width dan full-viewport.
Berbagai jenis konten yang dapat ditampilkan di Hero slide berdasarkan kebutuhan design.
variant="text-and-cta"
Full content: tag, title, description, buttons
Discover our latest innovation in sustainable transportation with cutting-edge technology.
variant="text-only"
Only text elements: tag, title, description
A perfect blend of form and function, crafted for the modern rider.
variant="cta-only"
Only CTA buttons (text included in design)
variant="title-only"
Only title (minimal design)
variant="empty"
No overlay content (design includes everything)
Custom Content Here
Use children for custom layouts
9 posisi berbeda untuk menempatkan konten di Hero slide menggunakan sistem grid.
position="top-left"
Position demonstration
position="top-center"
Position demonstration
position="top-right"
Position demonstration
position="center-left"
Position demonstration
position="center"
Position demonstration
position="center-right"
Position demonstration
position="bottom-left"
Position demonstration
position="bottom-center"
Position demonstration
position="bottom-right"
Position demonstration
Pengaturan alignment teks dalam area konten.
textAlign="left"
This text demonstrates the alignment option.
textAlign="center"
This text demonstrates the alignment option.
textAlign="right"
This text demonstrates the alignment option.
Lebar maksimum area konten.
contentWidth="narrow"
This demonstrates how the content width affects the layout and text wrapping behavior in the hero section.
contentWidth="medium"
This demonstrates how the content width affects the layout and text wrapping behavior in the hero section.
contentWidth="wide"
This demonstrates how the content width affects the layout and text wrapping behavior in the hero section.
contentWidth="full"
This demonstrates how the content width affects the layout and text wrapping behavior in the hero section.
Berbagai jenis overlay untuk meningkatkan readability teks di atas background image.
overlay="none"
overlayOpacity={50}
See how the overlay affects readability
overlay="dark"
overlayOpacity={50}
See how the overlay affects readability
overlay="light"
overlayOpacity={50}
See how the overlay affects readability
overlay="gradient-left"
overlayOpacity={50}
See how the overlay affects readability
overlay="gradient-right"
overlayOpacity={50}
See how the overlay affects readability
overlay="gradient-top"
overlayOpacity={50}
See how the overlay affects readability
overlay="gradient-bottom"
overlayOpacity={50}
See how the overlay affects readability
overlay="gradient-center"
overlayOpacity={50}
See how the overlay affects readability
Perbandingan opacity overlay dari 20% hingga 80%.
overlayOpacity={20}
overlayOpacity={40}
overlayOpacity={60}
overlayOpacity={80}
Berbagai arah animasi masuk untuk konten Hero slide. Animasi akan trigger saat scroll.
animationDirection="none"
Watch the entrance animation
animationDirection="up"
Watch the entrance animation
animationDirection="down"
Watch the entrance animation
animationDirection="left"
Watch the entrance animation
animationDirection="right"
Watch the entrance animation
animationDirection="fade"
Watch the entrance animation
Tema warna untuk menyesuaikan dengan background image.
theme="dark"
Teks terang untuk background gelap
Use this theme when your background image is dark or has a dark overlay.
theme="light"
Teks gelap untuk background terang
Use this theme when your background image is light or has a light overlay.
Contoh kombinasi theme dan overlay untuk berbagai skenario.
Product Launch Hero
Dark theme + gradient-left overlay
Revolutionary performance meets sustainable design. Pre-order now and be among the first to experience the future.
Promo Banner Hero
Dark theme + gradient-bottom overlay
Minimal Brand Hero
Dark theme + center position
Feature Highlight Hero
Dark theme + right position
0-80% in just 15 minutes. Our proprietary charging technology delivers unmatched convenience.
