Eight hero sections for the top of a landing page: a centred hero with two buttons, a split layout with a product mock-up, an animated gradient, a waitlist signup, text over a full-bleed image, proof points, a typographic portfolio hero and an app download hero.
A centred hero with an eyebrow line, a large headline that scales with clamp(), a supporting sentence and primary and secondary buttons. The headline is the page's h1, the line length is capped for readability, and the layout needs no media queries.
View code
<section class="hc">
<p class="eb">For independent makers</p>
<h1>Sell your work without the busywork</h1>
<p class="lead">Stock, orders and shipping labels in one calm dashboard, so you can get back to making.</p>
<div class="cta"><a href="#" class="p">Start free</a><a href="#" class="s">See how it works</a></div>
</section>
Text on the left and a product visual on the right, the most common SaaS hero. CSS Grid places the two halves and stacks them on phones with the text first; the visual is a CSS mock-up of a dashboard so the demo needs no images.
View code
<section class="hs">
<div>
<h1>Know what to restock, before it runs out</h1>
<p>Forecasts from your real sales, sent to your inbox every Monday.</p>
<a href="#">Try it free for 14 days</a>
</div>
<div class="mock" role="img" aria-label="Dashboard showing a sales chart and three low-stock items"><span class="ch"></span><span class="row"></span><span class="row"></span><span class="row s"></span></div>
</section>
A bold hero over a slowly shifting gradient, with a headline that has one gradient word. The background animates background-position over twenty seconds, slow enough not to distract, and stops completely for people who prefer reduced motion.
View code
<section class="hg">
<h1>Design that feels <span>effortless</span></h1>
<p>Websites for small brands, built in weeks, not months.</p>
<a href="#">Book a call</a>
</section>
A launch or waitlist hero with an inline email form under the headline. The input and button sit on one line on wider screens and stack on phones, the input has a real label, and a small privacy note sits right under the form.
View code
<section class="he">
<h1>Be first to try Harbor</h1>
<p>We are opening the beta to 500 shops in November.</p>
<form onsubmit="event.preventDefault()">
<label for="he-e" class="sr">Email address</label>
<input id="he-e" type="email" autocomplete="email" placeholder="you@shop.com" required>
<button>Join the waitlist</button>
</form>
<small>One email when your invite is ready. No spam.</small>
</section>
A hero with text over a full-bleed background, here a CSS gradient standing in for a photo. A dark gradient overlay sits between image and text so the headline stays readable whatever the picture, which is the main risk of text-on-image heroes.
View code
<section class="hi">
<div class="txt">
<p>New season</p>
<h1>Linen for warm evenings</h1>
<a href="#">Shop the collection</a>
</div>
</section>
A hero followed by three short proof points such as delivery speed and return window, laid out as a definition list. Use facts you can stand behind; the numbers here are placeholders to replace with your own verified figures.
View code
<section class="hp">
<h1>Handmade ceramics, shipped with care</h1>
<p>Every piece is wrapped by hand in recycled packaging.</p>
<dl>
<div><dt>Ships in</dt><dd>2 days</dd></div>
<div><dt>Free returns</dt><dd>30 days</dd></div>
<div><dt>Made in</dt><dd>Our studio</dd></div>
</dl>
</section>
A portfolio hero that relies on type alone: a very large statement in two weights, a short line about the person and a text link. Generous whitespace and a narrow measure create the impact, with no images, buttons or background effects.
View code
<section class="hm">
<h1>Independent designer <em>making calm, useful websites.</em></h1>
<p>Currently booking projects for January.</p>
<a href="#">See selected work →</a>
</section>
A hero for a mobile app with store buttons and a phone mock-up drawn in CSS. The store buttons are links with full accessible names; replace them with the official App Store and Google Play badge artwork, which their brand guidelines require.
View code
<section class="ha">
<div>
<h1>Your shop, in your pocket</h1>
<p>Take orders, reply to customers and print labels from your phone.</p>
<div class="stores"><a href="#">Download on the App Store</a><a href="#">Get it on Google Play</a></div>
</div>
<div class="phone" role="img" aria-label="Phone showing the orders screen"><span class="nt"></span><span class="c"></span><span class="c"></span><span class="c s"></span></div>
</section>
A hero has a few seconds to say what you offer. Use one h1 that states the benefit plainly, one supporting sentence and one primary action; a secondary link can sit beside it for people who want to learn more first.
Fluid type
font-size: clamp(30px, 6vw, 52px) lets the headline grow with the screen between a minimum and a maximum, so one rule works from phones to desktops without media queries.
Text over images
When text sits on a photo, add a dark gradient overlay between them so the text keeps its contrast whatever the picture. Test with the brightest image you might use.
Proof you can stand behind
Numbers and badges in a hero build trust only if they are true. The proof-points demo uses placeholders such as delivery days; replace them with figures you can verify.
Frequently asked questions
Do hero sections need JavaScript?
None of these do.
How tall should a hero be?
Tall enough to show the message and action without scrolling on common screens; avoid full-screen heroes that push all content below the fold.
How do I keep the hero fast?
Avoid huge background videos, size images for the screen, and let the headline load as text, not as an image.