Hero Section
StructureThe large, prominent section at the top of a webpage that introduces the main message, often featuring a headline, subheadline, CTA, and visual media.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Hero Section coming soon.
How It Works in Apps/Websites
The hero section is typically the first thing visitors see when they land on a page. It occupies the 'above-the-fold' area and sets the tone for the entire page. A hero usually includes a compelling headline, supporting text, one or more call-to-action buttons, and often a background image, illustration, or video. It's designed to immediately communicate value and encourage users to take action or scroll further.
How AI Interprets This Term
When you say 'hero section', AI understands this as a full-width or near-full-width section at the top of the page, typically 50-100vh (viewport height). It expects a large headline (H1), supporting paragraph text, CTA buttons, and often a background image or split layout with imagery on one side. The layout is usually centered or split (text left, image right).
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a hero section with a headline, subheadline, and signup button
Design a split hero section with headline and CTA on the left, product mockup image on the right, gradient background from blue to purple, 80vh height
Show two hero section variations: one centered with background image, one split layout with illustration on the right
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
Usage Guidelines
When to Use
- •On landing pages to make a strong first impression
- •Homepage to communicate brand value proposition
- •Product pages to highlight key features
- •Marketing campaigns with a clear CTA
When NOT to Use
- •On content-heavy pages where users expect to find information quickly
- •Dashboard or app interfaces where utility is more important
- •When you need multiple entry points above the fold
Related Terms
CTA (Call-to-Action)
A prompt that encourages users to take a specific action, typically presented as a button or link with action-oriented text like 'Sign Up', 'Buy Now', or 'Learn More'.
Header
The topmost section of a page containing the logo, navigation, and often key actions like login or search. It typically stays consistent across all pages.
Landing Page
A standalone webpage designed for a specific marketing campaign or goal, focused on converting visitors through a single call-to-action.