Skip to main content
Frontend Glossary

UI components · Marketing

Hero Section

Also called: Hero, Hero banner, Above the fold, Masthead, Jumbotron

The big area at the top of a landing page or company site. A large headline, one line of explanation, and a main button tell people what the product is at first glance.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Add a hero section at the top of the landing page, about one screen tall. On the left, put a 48px headline, "Launch your online store in 10 minutes," a line of gray subheading, and two buttons (a solid "Start free trial" and an outlined "Watch demo"). On the right, put a product screenshot. On mobile, stack them vertically and shrink the headline to 32px.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Hero Section is what you need.

Use Hero Section when

  • The first screen of a company site, product landing page, or campaign page that needs to state its value in one sentence
  • You want to guide visitors to one main action, like signing up or starting a trial
  • You have a screenshot or visual that represents the product and deserves the spotlight

Pick something else when

  • Admin systems and tool pages, where users are there to get work done and don't need a big banner

    Use insteadSidebar Layout

  • You need to rotate several equally important promos

    Use insteadCarousel

  • Pages where the content itself is the point, like article pages or search results

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Headlines full of empty buzzwords like "Unlock the future" or "Empower growth," so nobody can tell what the product does

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    Four or five buttons with no clear main action

  3. 03

    Text placed right on a busy background image without enough contrast to read it

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A headline, a subheading, one or two call-to-action buttons, and an image (a screenshot, an illustration, or a background image), usually spanning the full width of the first screen.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

The hero is the first screen people see when they open a company's website. A very large headline says "what this is and what it can do for you," a line or two of subheading below adds detail, and then there are one or two buttons ("Start free trial", "View demo"). Next to it or behind it is a product screenshot, an illustration, or a video. It usually spans the full width of the screen and is close to one screen tall.

How it differs from a Carousel: a hero says just one most important thing, and its content stays put. A carousel rotates through several promos. How it relates to a Landing Page: the landing page is the whole page, and the hero is just its first block, followed by features, customer reviews, pricing, a footer, and so on. Common problems with AI-generated heroes: vague headlines ("Unlock the future"), too many buttons, and background images that make the text hard to read.

Developer info
Term ID
component-hero
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .hero
  • section[class*="hero" i]
  • [class*="hero" i]:has(h1)
  • main > section:first-child:has(h1)
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026