Hero section
Also called hero, hero banner, or hero area
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
export function HeroSection() {
return (
<section className='mx-auto grid max-w-6xl items-center gap-12 px-6 py-16 text-center md:grid-cols-2 md:py-24 md:text-left'>
<div>
<h1 className='text-4xl font-bold tracking-tight text-balance md:text-[56px] md:leading-[1.1]'>
Plan your next trip together
</h1>
<p className='mt-4 text-lg text-muted-foreground'>
Share the itinerary, split costs, and vote on what to do next.
</p>
<div className='mt-8 flex items-center justify-center gap-6 md:justify-start'>
<a
href='/signup'
className='rounded-full bg-primary px-5 py-3 font-medium text-primary-foreground hover:bg-primary/90'
>
Start free
</a>
<a href='/demo' className='font-medium hover:underline'>
See demo
</a>
</div>
</div>
{/* Often the largest element on the page: fetch it first and reserve its space. */}
<img
src='/screenshot.png'
alt='The trip planner showing a shared itinerary'
width={1200}
height={900}
fetchPriority='high'
className='h-auto w-full rounded-2xl border shadow-xl'
/>
</section>
);
}Build a hero section for the landing page: a 56px bold headline (40px on phones) of at most 10 words, a one-sentence subhead in muted gray, a primary "Start free" button and a secondary "See demo" link, and a product screenshot on the right. Under 768px, stack everything centered with the screenshot below the buttons, and keep the headline and button above the fold.
Paste into Layerwise or any AI coding tool.
What is Hero section?
The hero is the first thing people see when a page loads. It usually has four parts: a headline that says what the product does, a subhead that explains who it is for or how it works, a primary call-to-action button (often with a quieter secondary link), and a visual such as a product screenshot, illustration, or short video.
Use those part names when you ask AI for changes. "Shorten the hero headline and keep the subhead to one line" or "Move the hero visual to the right of the text on desktop and below the buttons on phones" gets a precise edit instead of a redesign of the whole page.
Keep the headline to about ten words and give the hero one main action. On phones, check that the headline and button still show without scrolling. The hero image is often the largest element on the page, so load it early with fetchpriority="high" and set its width and height so the layout does not shift when it arrives.
Often confused with
- Above the fold
- Above the fold is everything visible before scrolling, whatever it contains. The hero is one section, and it usually fills most of that space.
Related terms
All termsAbove the fold
The part of a page visible before anyone scrolls, ending at the fold: the bottom edge of the screen, which moves with every screen size.
Typographic hierarchy
Using differences in text size, weight, and color so people can tell at a glance what to read first, second, and last.
Split screen
A layout that divides the screen into two side-by-side panels, each with its own content, sometimes with a divider you drag to resize.
Bento grid
A grid of rounded tiles in mixed sizes that fit together like a bento lunch box, often used to show several features at once.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.
