Hero Sections
Hero sections for the top of landing pages and product websites.
What makes a hero section work?
A hero section has about three seconds to say what the page offers and what to do next. The heroes here solve that in different ways: a headline with one clear button, a product that turns as you scroll, a film that plays along with the page, or a portrait with a few lines beside it. Each one is a single React file styled with Tailwind CSS, so you can read it top to bottom and change it in place.
Pick by what you have to show. With strong photography, a full-bleed image hero carries the message. With a product, a split layout or an object hero keeps text and visual side by side. With little visual material, a typographic hero with motion in the words still feels finished. Every hero is checked at phone width, and animations switch off when the visitor has reduced motion turned on.
Related guides
More section categories
Frequently asked questions
Six to ten words work best. The headline states the result, a subline of one or two sentences adds the how. Most heroes here are set for two lines on desktop and three to four on a phone.
Yes. Images and videos are plain URLs in the file, so you swap the address and keep the layout. For full-width backgrounds use an image at least as wide as the screen, 1920 pixels for desktop, otherwise it looks soft.
Yes. They react to normal touch scrolling. With reduced motion turned on, the hero shows its final state without the animation.
Six heroes are free in full, including the code. Premium unlocks every hero and every other category, for your own projects and client work.
Didn't find your question? We're happy to help.
Get in touch