Hero Section
A large, attention-grabbing area at the top of a page with headline, subtext, and call-to-action
What is it?
A hero section is the first impression visitors get when landing on your page. It's a full-width (or wide container) area featuring a prominent headline, supporting subtext, and one or more call-to-action buttons. Hero sections are common on landing pages, homepages, and email campaigns because they quickly communicate your value proposition and guide users toward the next action.
Hero sections typically span the full viewport height on desktop and adapt gracefully on mobile. They often include a background image, gradient, or video to make a visual impact.
Mockdown
``` ┌──────────────────────────────────────────────────────────┐ │ │ │ 🚀 Welcome to Acme │ │ │ │ Build better products, faster │ │ │ │ [ Get Started ] [ Learn More ] │ │ │ │ │ └──────────────────────────────────────────────────────────┘ ``` Key elements: - **Headline**: Bold, large text communicating the core value - **Subheading**: Supporting text explaining the benefit or use case - **CTA buttons**: Primary action (darker/bold) and secondary action (lighter/outline) - **Visual background**: Image, video, or gradient to create visual interest - **Vertical centering**: Content centered both horizontally and vertically
Layouts Using This Pattern
┌───────────────────────────────────────────────┐
│ ┌───────────────────────────────────────┐ │
│ │ ✉ Preview text goes here... │ │
│ └───────────────────────────────────────┘ │
│ │
│ ◉ ACME Inc. │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ │ │
│ │ 🚀 Introducing Our New Feature │ │
│ │ │ │
│ │ We've been working hard to bring │ │
│ │ you something special... │ │
│ │ │ │
│ │ [ Learn More → ] │ │
│ │ │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Feature 1│ │ Feature 2│ │ Feature 3│ │
│ │ desc │ │ desc │ │ desc │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ Unsubscribe · Preferences · View Online │
└───────────────────────────────────────────────┘Marketing
Product Launch Email Campaign
A responsive HTML email layout for a product launch — featuring a hero image, feature highlights, social proof, and a single focused CTA — compatible with major email clients.
--email--campaign--launch
Simple
┌───────────────────────────────────────────────┐
│ Logo Features Pricing ◆ Get Started │
├───────────────────────────────────────────────┤
│ │
│ Build something amazing. │
│ The fastest way to ship your app. │
│ │
│ [ Get Started ] [ Learn More → ] │
│ │
├───────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ ⚡ Fast │ │ 🔒 Safe │ │ 📦 Easy │ │
│ │ Feature │ │ Feature │ │ Feature │ │
│ │ desc... │ │ desc... │ │ desc... │ │
│ └───────────┘ └───────────┘ └───────────┘ │
├───────────────────────────────────────────────┤
│ "Loved by 10,000+ developers" ★★★★★ │
├───────────────────────────────────────────────┤
│ Logo · Twitter · GitHub · © 2026 │
└───────────────────────────────────────────────┘Landing Page
SaaS Product Landing Page
A conversion-focused SaaS landing page with a hero section, feature grid, social proof, pricing preview, and a sticky CTA — built to drive sign-ups.
--hero--cta--features
Medium
Use these prompts to generate layouts built with this pattern.
Ready to build?
Use this pattern as inspiration when creating UI layouts with AI tools.