Layout / The visual dictionary
Hero section.
A prominent introductory section that communicates the page's main message.
Also calledhero bannerhero block
01
UI illustrationSee it in context
ACMEExplore
Make room
for ideas.
for ideas.
Your next chapter starts here.
Get started ↗02
What it is
A prominent introductory section that communicates the page's main message. Combine a strong heading with concise supporting copy and a clear next action.
When to use it
Use it on landing or overview pages that need a focused introduction.
Know the difference
A hero introduces a page; a header provides the page or site's structural frame.
03
Across platforms
Web
Web
Hero layouts may split text and imagery on desktop, then stack them on phones.
04
Go to the source
Primary documentation for the pattern and its platform conventions.