What is the hero section on a website? Plus tips & examples.

Is it a bird? Is it a plane? No. It’s the hero section of your website achieving big things for your business.

In 2025, a hero section is a web design essential. It’s a chance to wow potential customers from the moment they land on your site — and it’s a relatively easy thing to implement.

Here, we look at everything you need to know about a website hero section. We’ll be covering:

• What is a hero section?
• What should a hero section include?
• Tips for eye-catching hero section web design
• 6 standout hero content examples

What is a hero section?

A website hero section — also known as a hero banner — is a large photo, video or graphic that appears at the top of a homepage or landing page. It appears above the fold (ATF). This is the part of a web page that users can see without scrolling. And it usually takes up the full width of the page.

The hero section is the first thing users see when they land on your website. So you can use impressive hero section web design to make a memorable first impression.

The hero section is the first thing users see when they land on your website. So you can use impressive hero section web design to make a memorable first impression.

What should a website hero section include?

A good website hero section tends to include:

• An attention-grabbing hero image — whether that’s a full screen photo, video or graphics
• Compelling text — to drive home the message conveyed by your hero image
• A call to action (CTA) — so users can click to a relevant page without having to scroll any further
• Your logo and navigation menu — these things sit above your hero section but they’re an important part of the user experience, giving customers quick links to the things they’re likely to need

Some hero banners also include a few unique selling points (USPs) associated with your brand. For example, in an e-commerce web design, you might choose to highlight free delivery, easy returns or your current money-off discount.

Tips for eye-catching hero section web design

Your hero section can really pack a punch when it comes to user experience (UX). It gives customers an emotive, visually appealing and informative introduction to your brand. But only when you follow best practice for hero content and hero image web design.

Here are some tips for creating a hero section that works hard for your business.

Share who you are as a brand

Your hero section is a chance to tell users — in an instant — something about who you are as a company. That might mean sharing your aspirational lifestyle content with customers. It may mean highlighting your newest product or your latest deal.

As well as considering the message you want to share, use visuals to convey your brand personality and make an emotional connection with users. Include a hero image or video that fits with your website branding — using the colour scheme, fonts and imagery you use across the rest of your site.

Only use high quality hero images

To make the best impression, your website hero image should be of the best possible quality. It should be high enough resolution that it looks crisp on all screen sizes.

You should also avoid stock images at all costs. For a hero image to be an authentic reflection of your brand — and to ensure users haven’t seen and associated it with another brand elsewhere on the internet — invest in professional photos that tell your brand story.

Consider adding video

Website video is even more eye-catching than a hero image. And there are lots of ways to incorporate it into your hero banner. Use a looping live action video as your hero section background. Create a custom video animation that explains your product. Or use micro-animations to bring your logo and other graphics to life.

Craft a punchy headline

Visuals are a big part of the hero section experience. But don’t treat the words you use in your hero banner as an afterthought. Your copy can have a huge impact, with some brands choosing to use typography and text (not photo or video) as stars of the show.

When it comes to crafting an impactful headline, keep it short and snappy. Ensure there’s a clear link between your visuals and your text. And try to tap into a key benefit your product or service provides for customers, making it about them rather than you.

Add succinct supporting text

Most brands choose to expand a little on their headline. They include a sentence or two of hero text below it. Remember: you don’t need to convince customers of all your USPs right this second. Instead, you want a short summary that encourages users to take the desired action.

When deciding what to say in your hero banner, think back to sales calls and customer reviews. What primary problem are customers trying to solve? And why do they choose a solution like yours? Think about the feedback you get from customers most often and lead with that.

Be sparing with CTAs

Your call to action (CTA) buttons should stand out from the rest of your hero section. A good web design company will know how to use contrasting colours, fonts and button positioning to draw the eye of website users.

Here at Radical, we also advise our clients to include just one call to action button in the hero section. This helps to focus user attention where you want it, guiding customers on your preferred path through the website and encouraging conversions.

Sometimes — when there really are two routes users can take at this point in the journey — we sneak in one more CTA. But we like to use colour and design to single out one call to action button as the primary option.

Use white space

To avoid a hero section becoming too cluttered and overwhelming for a user, you need to ensure there’s enough white space. This is space that is free from:

• Text
• Buttons
• Detailed imagery

You can create white space in your hero section by using images or videos with a blank, blurred or minimal background. If you’re using graphics, create space where only your plain, background colour is visible.

Avoid using a carousel

A hero section carousel allows companies to include a variety of images and calls to action — and convey a range of different messages to their customers. For example, they can showcase a new product range, their latest offer and a link to sign up for email marketing.

We see lots of websites with carousels. But this isn’t something we recommend.

Studies show that users tend to ignore carousel content — and that carousels create a frustrating user experience. They’re not great for engagement either because they dilute your message, pulling users in different directions and making them less likely to click on your CTAs.

Don’t sacrifice site speed

High quality images and videos can mean hefty file sizes. And while users are likely to be wowed by impressive graphics, they won’t forgive you if your site takes an age to load. In fact, they’ll probably be heading back to search results before they’ve even seen your hero banner.

So it’s important to ensure that your hero section doesn’t slow your site down. A good web developer can balance the need for fast site speeds with a great first impression, so your hero banner doesn’t harm the user experience or your SEO efforts.

Consider the mobile experience

Your hero section and hero image should make a great first impression across all devices. So think about how the experience will translate from a large desktop computer to smaller mobile screens. Ensure that your design is responsive so your hero banner — and the rest of your website – fits seamlessly to all screen sizes.

Test your hero design decisions

To be sure that your hero banner is having the desired effect on website visitors, you can use A/B testing. Create different versions of your hero section — using alternative colours, headlines, images or CTAs — and see how this impacts page engagement and conversions. Based on your findings, you can then use the most popular hero section for all users.

6 hero image web design examples

Now we know what makes a great hero banner, let’s take a look at some hero content examples for some website inspiration.

Estate Research Learning Hub

Estate Research is a firm that supports public sector and private client solicitors to find next of kin when there’s no clear beneficiary for an estate. Via their Learning Hub, they share their legal expertise and insights into genealogy.

On the Estate Research Learning Hub website, a hero video displays the team at work. This video helps to bring a human face to what, at first impression, could be a dry and corporate industry.

It also provides a taster of the webinar training clients can expect, making them more likely to click the CTA button and create an account.

Crocus

Another great hero image web design example. Crocus is a company that sells plants and gardening equipment. In the hero section of its site, Crocus uses a static website hero image designed to excite gardeners about the colour and beauty they can bring to their garden over the year ahead.

Crocus uses this opportunity to highlight a current offer, allowing customers to shop for discounted products via the CTA. The brand also includes a range of trust signals including its Trustpilot rating and a five-year plant guarantee.

Aurora Nights

Another really effective hero banner example can be found over on the Aurora Nights website. Here, a hero video showcases the dancing colours of the northern lights and inspires users to browse or book their northern lights holiday.

This hero section is simple and striking. Users see a logo, a navigation menu, a headline and a call to action — so the impressive hero section video has plenty of space to shine.

Salesforce

The Salesforce hero banner is more text-focused. It gives equal space to copy and imagery. On the right, we have an explainer video that showcases what Salesforce can do for a company. On the left, we have a powerful headline and a summary of Salesforce software benefits.

Below this text, there are two CTAs. The primary CTA — Try for free — stands out with a bold blue-on-white colour scheme. But users who aren’t ready to dive into a free trial can still take the next step on their customer journey by watching a demo.

Apple

The next standout hero content example comes from Apple. Apple uses its hero section to highlight its latest product release. Everything about this banner aligns with Apple’s minimalistic, high-tech brand identity. And the website hero image couldn’t be any higher quality.

It’s also easy for users to buy or learn more about this product. And — if they actually landed on the website looking for another kind of product, an easy-to-understand navigation menu helps them head straight there.

Cinch

The Cinch website hero section uses bold colours, conversational copy and a fun graphic that fit the brand’s identity. There’s good use of white space here, too. While Cinch conveys a lot of information on the page, it’s not visually overwhelming.

Cinch also knows exactly what users want when they arrive on its homepage. So it puts a Find A Car search widget in the hero section, making it easy for customers to head straight to the most relevant page on the website.

Is your homepage banner more zero than hero? Radical can help

A well-designed hero section gets a user’s website experience off on the right foot. It tells them about your brand, introduces your offering and guides them to take action. It also creates an emotional connection with users, which makes them more likely to remember your brand and do business with you in future.

Here at Radical, our web designers and web developers create beautiful bespoke websites, with hero image web design that make a real impact on your audience. Using the hero banner best practices above, we incorporate branding, high-quality imagery and responsive design to make an excellent first impression on your customers.

Want to bring your website homepage bang up to date? Then get in touch with the Radical team to chat about a website redesign.