Hero Split Stacked

A bold hero section with text and a button layered over a large image. Use it to create a strong visual introduction with adjustable image width, height, text styling, background overlay, transparency, and alignment options.

Learn more

Responsive Preview

Desktop Tablet Mobile

Tailwind Breakpoints

sm 640 md 768 lg 1024 xl 1280 2xl 1536

Desktop · full width

Hero Split Stacked

Image Width

Contained Full Width

Image Height Text Color Text Background Background Transparency 0.50 Heading Font Size · Desktop 72px Text Font Size · Desktop

Text Alignment · Desktop

Left Center Right

Extend Background To Edge On

Custom CSS Scoped to this section only. Use nested selectors or plain declarations. No <style> tags needed.