Hero section

Commonly found on a landing page, the hero section is the first section the user sees when visiting your website. This section contains essential information about your product, service, or company that helps the user understand what it is you offer.

Updated on November 30th, 2022


What should a hero section have?

The main goal of a hero section is to keep users engaged and on your website. To make that happen, you need to build trust and convince the user of the added value you offer. Here's everything a hero section should have to make that happen.

  • Main header. You explain what you have to offer here in one sentence. Focus on what the user will get.

  • Subtitle. You can use the subtitle to add more details about your offer. This is optional.

  • Call-to-action (CTA). Usually, this is a button for people to sign up or purchase something.

  • Social proof. This helps to build trust. You can add your average review rating or a client testimonial here.

In addition, the hero section is always on the top of the page. It is entirely in view before the user scrolls down the page. We call this above-the-fold content.

Is the hero section the same as a landing page?

No, the hero section is not the same as a landing page. It is mainly found as the first section of a landing page, but a landing page has much more content than just the hero section. In most cases, the landing page also mentions unique selling points, social proof, and pricing. These are not a part of the hero section.

Why is it called a hero section?

The hero section is called this way because it contains all the important info you need to mention on your website. That makes it a critical section and the section that brings in most of your clients. Due to this, it is the hero of your website, or in other words, the hero section.


Let's take a look at some examples of great hero sections. The following examples include everything that's been mentioned on this page.

Example of a hero section

Useful resources

Hero section - Dribbble



Page link

Want to learn more about Hero section?

Learn together with other UX designers in our community. Join by picking one of the options below.


  • Same as annual, but billed monthly.


Choose plan


Save 18% compared to monthly

  • 1️⃣ Join our Discord community

  • 2️⃣ Monthly UX Master Classes

  • 3️⃣ Office hours in the community


Choose plan


One purchase. Join forever.

  • Support the development and upkeep of UX Dictionary


Choose plan

Once you choose your plan, you'll be redirected to our Stripe page. After that, you'll be redirected to our dashboard. You can cancel, pause, or upgrade at any time.