A website hero section should answer three questions immediately: what this page offers, who it is for, and what the visitor can do next. The most reliable implementation is a concise heading, supporting context, one primary action, and a visual only when it improves understanding. Depending on the page, that can be a split text-and-image layout, an illustration beside text, an image with a separate panel, a restrained text-only header, a search-focused listing header, or a full-bleed media treatment.
Choose the pattern from the page task—not from visual novelty. Then validate reading order, contrast, responsive cropping, keyboard operation, and image loading at real breakpoints.
What belongs in a hero section?
The California Judicial Branch Design System defines a hero as a prominent top-of-page component that communicates a value proposition and guides users toward an action. A practical hero usually contains:
- A clear heading: state the page’s offer or the task the visitor can complete.
- Short supporting copy: provide only the context needed to choose the next step.
- One primary CTA: use a specific verb such as “Explore features,” “Find a service,” or “Start an application.”
- Optional media: use a photo, illustration, video, gradient, pattern, or solid color when it reinforces the message.
Keep the hierarchy obvious: heading first, supporting text second, action third. California guidance also recommends limited essential elements, whitespace, direct language, and avoiding a cluster of links or pop-ups. See the California hero guidance and Penn Libraries’ hero pattern.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
Six useful hero patterns
1. Split text-and-image hero
Place text in one column and a large photo or product image in the other. Texas documents a flex-row desktop layout that stacks on mobile, with filled and no-fill variants. This works when the image explains or strengthens the offer while the copy remains readable on its own.
Texas recommends a benefit-led title, a verb-led button, sentence case, and component-specific limits of 30 characters for the title, 300 for the body, and 30 for the button. Treat those limits as Texas specifications, not universal conversion rules. Read the Texas Hero Banner documentation.
2. Text beside a decorative illustration
A short introduction can sit beside a simple illustration using a center-and-sidebar layout. The W3C Design System marks its example illustration with empty alternative text because it is decorative. Use this pattern when the graphic adds tone but does not carry information users need to understand the page. The W3C hero example shows the approach.
3. Image with a separate text panel
HarvardSites documents both text below an image and a wider-screen overlay card that moves below the image on mobile. A separate panel prevents marketing words from being baked into the image and provides a predictable surface for readable copy. Harvard recommends static images, concise active language, high contrast, descriptive alternative text, and accessible CTA links. See HarvardSites’ hero guidance.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
4. Restrained or image-free hero
A hero does not require an image. NICE advises using a simpler page header when an image adds no useful interest or emphasis, and warns against using a decorative hero to introduce detailed or clinically important guidance. For documentation, policy, support, and information-heavy pages, a strong heading and immediate content often serve users better than a large visual. The NICE Design System describes this distinction.
5. Listing or search hero
For a library, catalog, archive, or results page, make the task itself the hero. The W3C listing variant combines a page title and short description with space for search or filter controls. Put the input, filter, or sorting control near the heading instead of forcing users through a promotional CTA.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
6. Full-bleed image or video background
Microsoft Atlas documents full-bleed media scaled with object-fit: cover. This can create impact, but cropping and contrast become design constraints. Select source images with a text-safe area, apply a stable text treatment such as a solid or translucent panel, and test every breakpoint. Atlas specifically warns that background media can make foreground colors inaccessible. Review its Hero component notes.
Write the content before styling
Make the heading an orientation device
Use a concise promise or task statement: “Manage invoices in one place,” “Find a public service,” or “Browse the photo archive.” Avoid internal product names and unexplained jargon; Penn Libraries recommends language users recognize.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Give the CTA a job
Choose one dominant action when the page has one dominant task. “View collection” tells users more than “Learn more.” If two actions are genuinely equal, style one as primary and make the secondary action a nearby text link. Do not let navigation links, announcements, and pop-ups compete with the hero’s purpose.
Keep support copy subordinate
Explain the audience, outcome, or important condition in one or two short sentences. Move detailed qualifications, instructions, and clinical or legal guidance into the page body where they can be scanned and revisited.
A responsive implementation you can adapt
The following example uses semantic HTML, a two-column desktop layout, and a stacked mobile layout. The image is informative, so it receives descriptive alternative text. Replace the text and image with content appropriate to your page.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
<section class="hero" aria-labelledby="hero-title">
<div class="hero__copy">
<p class="hero__eyebrow">Invoice workspace</p>
<h1 id="hero-title">Manage invoices in one place</h1>
<p>Create, send, and track invoices without switching between tools.</p>
<a class="hero__cta" href="/get-started">Start managing invoices</a>
</div>
<div class="hero__media">
<img src="/images/invoices-hero.webp"
alt="Invoice list showing paid and outstanding items"
width="1200" height="900" loading="eager" decoding="async">
</div>
</section>.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 6vw, 6rem);
max-width: 72rem;
margin-inline: auto;
padding: clamp(3rem, 8vw, 8rem) 1.25rem;
}
.hero__copy { max-width: 38rem; }
.hero h1 { max-width: 16ch; margin-block: .5rem 1rem; }
.hero__copy > p:not(.hero__eyebrow) { max-width: fiftych; }
.hero__media img { display: block; width: 100%; height: auto; border-radius: 1rem; }
.hero__cta { display: inline-block; margin-top: 1.5rem; padding: .8rem 1.1rem; }
@media (max-width: 48rem) {
.hero { grid-template-columns: 1fr; gap: 2rem; }
.hero__media { order: 2; }
}
In production, correct the illustrative fiftych typo to 50ch; the example is otherwise intentionally minimal. Keep the DOM order meaningful so screen-reader and keyboard users encounter the title, supporting text, CTA, and then media. The Intelligence Community Design System documents that focus order and reports testing its component against WCAG 2.2 Level AA with NVDA and VoiceOver; its page was last reviewed 15 April 2024. That claim applies to its component, not automatically to your implementation: read the accessibility documentation.
Free tools Windows power users keep installed
One-click scans. No signup required.
Responsive decisions to make deliberately
Choose what happens to the image
- Stack it: place text first and image second when the image remains useful on phones.
- Move an overlay panel below: preserve readable text without covering a narrow crop.
- Omit it: remove a decorative image when it consumes scarce vertical space.
- Art-direct it: provide a different crop or source when the desktop composition cannot survive a narrow viewport.
Penn Libraries recommends sizing images for all screens and using art direction where composition changes. Do not set a universal fixed hero height: translated text, browser zoom, and user font settings can require more intrinsic content height. Let the content expand rather than clipping a heading or CTA.
Validate cover crops
If you use object-fit: cover, inspect each actual breakpoint. Keep faces, products, and other important subjects out of the area where text appears. A crop that looks safe at 1440 pixels can hide the subject at 390 pixels.
Accessibility checklist
- Provide strong contrast between text and its background. A solid text panel is more predictable than a gradient over a busy photograph.
- Use descriptive
alttext when the image conveys information; usealt=""for purely decorative artwork. - Keep CTA links or buttons keyboard operable, visibly focused, and understandable without surrounding visual cues.
- Preserve a logical reading and focus order in the DOM.
- Respect zoom, increased text size, and translated strings by allowing the hero to grow.
- Give users a usable still experience when motion is not necessary. Harvard’s hero system disallows animated images and video, while Microsoft Atlas allows background video with contrast and responsive checks; follow the requirements of your own site and audience.
Performance and media handling
Choose the smallest image that remains sharp at its rendered size, serve modern formats where supported, and compress files before publishing. California guidance recommends media optimization, and NICE specifically calls for cropped and compressed images. Set intrinsic width and height to reduce layout shifts. Load an above-the-fold hero image eagerly only when it is genuinely part of the initial experience; otherwise use lazy loading. No source reviewed establishes a universal performance threshold or a measured conversion lift for one hero layout.
How to compare a hero before launch
| Question | What to inspect |
|---|---|
| Message clarity | Can a first-time visitor state what the page offers after reading the heading? |
| Image contribution | Does the visual explain or reinforce the message, or merely add decoration? |
| Responsive behavior | Does the layout stack, crop, move, or disappear sensibly on small screens? |
| Accessibility | Are contrast, alternative text, motion, reading order, focus, and CTA operation handled? |
| Loading | Is the asset correctly sized and compressed for the viewport? |
| Task fit | Should the hero foreground a CTA, search, filters, or direct information? |
These criteria help you make a design decision; the cited systems provide patterns and guidance, not controlled evidence that one structure converts better.
Recommended Free Tools
Or skip the browser setup
If you need screenshots of hero variants for QA, documentation, or visual review, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request. Before capture it accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Example cURL (see the ScreenshotNeo API documentation):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The service also supports full-page captures with lazy images loaded, CSS-selector element capture, dark mode, device presets and custom viewports, retina scale, PDFs with paper size and margins, custom CSS and JavaScript, click-before-capture, hide selectors, selector/delay/network-idle waits, request blocking, custom headers and cookies, timezone and geolocation, transparent backgrounds, resizing, chosen-TTL caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Parameter names used by other screenshot APIs are accepted to ease migration.
Plans include 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000 shots. Growth is $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; annual billing provides two months free, and every feature is on every plan. Create a free ScreenshotNeo account.
Common implementation failures
Text disappears against the image
Add a solid or translucent panel, darken the image with an overlay, or switch to a non-image hero. Verify contrast in every crop rather than trusting the desktop screenshot.
The mobile crop hides the subject
Change the focal point, provide an art-directed mobile source, or move the image below the text. Test at the narrowest supported width.
The hero is clipped or overlaps content
Remove fixed heights, check long translated strings and zoomed text, and let grid rows size to their contents.
The page feels slow
Inspect image dimensions and compression, avoid shipping a desktop-resolution asset to phones, and defer media that is not needed for the initial task.
Search or filters are hard to find
Use the listing/search pattern and place the task control in the hero rather than hiding it behind a promotional button.
Frequently Asked Questions
Does every website need a hero image?
No. Use an image only when it adds useful interest or explains the offer; many information and documentation pages are clearer with a restrained text-only header.
What is a safe hero height?
There is no universal height. Let content determine height so headings, translated copy, zoom, and larger text are not clipped.
Should a hero have more than one button?
Use one primary CTA when the page has a dominant task. Add a secondary text link only when it represents a genuinely different, important path.
Should background video autoplay?
Only when it is necessary and the site’s accessibility requirements allow it. Provide a usable still experience and verify contrast and responsive behavior.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
