What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A strong website hero section answers three questions immediately: what this page offers, who it is for, and what the visitor should do next. The best implementation is not a fixed layout. Choose a pattern—split content, illustration, overlay, image-free header, listing/search, or full-bleed media—according to the page task, then make its content order, contrast, responsiveness, and loading behavior work at every viewport.
What a hero section should accomplish
A hero is the prominent introductory component near the top of a page. The California Judicial Branch Design System defines its job as communicating a value proposition and guiding users toward an action. Typical parts are a heading, supporting text, optional image or illustration, and a CTA; a solid color, gradient, or pattern can replace media. See the California hero guidance.
Write the heading around the visitor’s benefit or task, not an internal product name. Add only the context needed to choose the next step, then use one clear primary action when the page has a dominant goal. Labels such as “Explore features,” “Find a service,” “View the collection,” or “Start an application” are more useful than vague “Learn more.” Penn Libraries recommends familiar language and avoiding jargon; California guidance emphasizes hierarchy, whitespace, limited essential elements, and avoiding excess links or pop-ups.
Six practical hero patterns
1. Split text and image
Place a heading, paragraph, and CTA beside a large photograph or product visual. Texas documents a flex-row desktop layout that stacks on mobile, with filled and no-fill variants. Its component guidance limits the title to 30 characters, body copy to 300 characters, and button label to 30 characters; treat those as Texas component specifications, not universal conversion rules. Use a benefit-led title and a verb-led button. This pattern works when the image reinforces the message while text remains independently readable. Texas Hero Banner
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches2. Text with an adjacent illustration
A short introduction beside a decorative illustration is a low-complexity option for campaign, service, or documentation pages. The W3C Design System example uses center and sidebar layout patterns and gives the decorative image empty alternative text, so assistive technology does not announce redundant artwork. If the illustration conveys information, provide meaningful alt text instead. W3C hero examples
#1 Best Overall
3. Image with a separate text panel
HarvardSites shows text below an image and an overlay card that moves below the image on mobile. A separate panel prevents words from being baked into pixels, offers a predictable contrast surface, and keeps CTA links accessible. Harvard recommends static images, concise active copy, descriptive alternative text, and high contrast. HarvardSites Hero
4. Image-free or restrained header
Use a simple heading, description, and action when media does not add meaning. NICE advises using a hero image only when it adds useful interest or emphasis and recommends a simpler page header for information-heavy content. Do not use a decorative hero to delay or obscure detailed clinical, legal, or instructional guidance. NICE Hero
5. Listing or search hero
For archives, catalogs, and resource directories, make the task itself prominent: page title, concise description, then search and filter controls. The W3C listing variant reserves hero space for narrowing content rather than showcasing a marketing image. This is usually more effective for task-oriented pages than a promotional banner.
Recommended Free Tools
6. Full-bleed image or video background
Microsoft Atlas documents full-bleed media using object-fit: cover. Cover cropping changes at different aspect ratios, so select imagery with a safe area around the subject and validate every breakpoint. Foreground colors that work on desktop may fail over a bright mobile crop. Atlas specifically warns about contrast and responsive checks. Microsoft Atlas hero
Content hierarchy that survives scanning
- State the offer or task. Make the first heading understandable without surrounding navigation.
- Add necessary context. Explain audience, scope, or outcome in one or two short sentences.
- Present the primary action. Use a specific verb and keep secondary links visually subordinate.
- Support the message visually. Remove media that cannot be tied to the page purpose.
Keep sentence case unless your site system specifies otherwise. Avoid repeating the exact heading in image alt text or button labels. A hero should not become a collection of announcements, pop-ups, badges, and competing links; each extra element weakens the visual path from heading to action.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Responsive implementation decisions
Choose a deliberate mobile transformation
Do not merely shrink a desktop hero. Stack text and image, move an overlay card below the image, omit the image, or serve an art-directed crop. Penn Libraries recommends sizing images for all screens and selecting art direction when composition changes. Test the actual content, including long translated headings and browser zoom.
Preserve reading and focus order
DOM order should communicate the same sequence as the visual layout: heading and supporting text, interaction area, then supplementary right-hand content. The Intelligence Community Design System documents this focus order and reports that its component was tested against WCAG 2.2 Level AA with NVDA and VoiceOver; that statement applies to its component, not automatically to your implementation. Its accessibility page was last reviewed 15 April 2024. Intelligence Community accessibility guidance
Let content determine height
A fixed hero height can clip a translated heading, enlarged text, or keyboard focus. Prefer intrinsic height with sensible minimum spacing. If you use a minimum height for visual balance, allow it to grow and verify at 200% zoom.
Accessible media, controls, and motion
- Maintain strong contrast between text and its background. A solid panel over an image is more predictable than a gradient alone.
- Give informative images descriptive alt text; use
alt=""for purely decorative artwork. - Ensure links and buttons have visible focus, usable target sizes, and meaningful names.
- Do not put essential instructions only inside an image.
- Provide a usable static experience for motion. Harvard’s hero system disallows animated images and video, while Atlas permits background video but requires contrast and responsive validation. Follow the requirements of your own design system and audience.
Harvard and NICE both call for appropriately cropped and compressed images. California also recommends media optimization. The reviewed guidance does not provide a universal hero performance threshold or a measured conversion lift, so do not promise that one layout will “boost conversions.”
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
Reference implementation
This semantic HTML keeps the heading and action in the reading order while allowing a responsive two-column layout:
<section class="hero" aria-labelledby="hero-title">
<div class="hero__copy">
<p class="eyebrow">Research library</p>
<h1 id="hero-title">Find evidence you can use</h1>
<p>Search peer-reviewed resources, save results, and share a reading list.</p>
<a class="button" href="/search">Search the library</a>
</div>
<div class="hero__media">
<img src="/images/library.webp" alt="A researcher reviewing printed articles" width="960" height="720" loading="eager" decoding="async">
</div>
</section>.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,5vw,5rem); align-items:center; padding:clamp(2rem,7vw,6rem) 5vw; }
.hero__media img { display:block; width:100%; height:auto; object-fit:cover; }
@media (max-width: 700px) { .hero { grid-template-columns:1fr; } .hero__media { order:2; } }Use responsive image sources when crops or resolutions differ:
<picture>
<source media="(max-width: 700px)" srcset="/images/library-mobile.webp">
<img src="/images/library.webp" alt="A researcher reviewing printed articles" width="960" height="720">
</picture>Testing checklist
- Read only the heading, paragraph, and CTA: is the page purpose clear?
- Resize through every breakpoint; inspect stacking, crop, and text wrapping.
- Keyboard-tab through the hero and confirm visible focus and logical order.
- Check contrast over the brightest and darkest image areas.
- Test screen readers with informative and decorative images.
- Zoom to 200% and use large text; verify that nothing clips.
- Test slow connections and confirm compressed, correctly sized assets.
- Disable motion or use reduced-motion behavior where your system requires it.
Or skip the browser setup
If you need screenshots of your finished hero at several breakpoints, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one request. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify 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.
cURL (see the ScreenshotNeo 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}`);Every plan includes full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets and custom viewports, retina scale, PDF controls, custom CSS and JavaScript, click and wait conditions, request blocking, headers, cookies, user agents, timezone and geolocation, transparent backgrounds, resizing, TTL caching, signed links, async webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Pricing is Free for 1,000 shots per month with no card; Starter is $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free. Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting common hero failures
Text disappears on an image
Add a solid text panel or a tested overlay, choose a safer crop, and recheck contrast at each breakpoint. Do not rely on a single desktop screenshot.
The mobile hero is excessively tall
Serve a smaller art-directed image, reduce nonessential copy, or omit decorative media. Keep the heading and primary action before supplementary content.
The image is blurry or slow
Export an appropriately sized compressed image, provide width and height to prevent layout shift, and use responsive sources. Do not send a desktop-original asset to every phone.
Important information is missing for screen readers
Check whether the image was incorrectly given empty alt text, whether text was embedded in pixels, and whether the CTA has an ambiguous name. Restore information to real HTML.
Overlay content is clipped
Remove fixed heights and overflow clipping, then test translated text and zoom. Let the component grow with its content.
The hero competes with search or filters
Convert it to a listing/search pattern: title, short explanation, then the controls that complete the page’s main task.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →How to choose among patterns
| Page condition | Good starting pattern | Primary check |
|---|---|---|
| Product or service with a useful visual | Split text and image | Text remains readable independently |
| Decorative campaign illustration | Text with adjacent illustration | Decorative alt text is empty |
| Photography must dominate | Separate text panel or restrained overlay | Contrast and mobile panel position |
| Dense guidance or clinical information | Image-free header | Content is immediately available |
| Archive, catalog, or directory | Listing/search hero | Search and filters are the obvious task |
| Brand-led campaign with media | Full-bleed background | Safe crop, contrast, and motion behavior |
Frequently Asked Questions
How many CTAs should a hero have?
Use one primary CTA when the page has a dominant task. Add a secondary link only when it serves a genuinely different, important path.
Should a hero image be above or below the heading in HTML?
Keep the heading, supporting text, and primary interaction first in the DOM unless the image itself is the page’s essential content. Match visual order to reading and focus order.
Is there an ideal hero height?
No universal height is established by the cited design systems. Use intrinsic content height, then validate spacing, crops, zoom, and translated copy.
Can a hero use video?
Yes in systems that permit it, but provide a useful static fallback, verify contrast and responsive cropping, and follow your site’s motion and accessibility requirements.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →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.
