UI Terms visual dictionary

Layouts

Hero

A large introductory section at the top of a page that sets the tone and message.

Heroes typically combine a headline, supporting line, primary call-to-action, and a visual — image, video, or illustration. The section dominates the first screen the user sees. On marketing pages the hero is the single most important block for conversion; on app pages it's often a status or context header instead.

Also called

hero sectionhero bannerabove-the-fold

When to use

  • Landing pages where you need to communicate value in one screen
  • Product or campaign pages with a single clear primary action
  • Documentation or app home pages that orient the user

When not to use

  • Content-heavy pages where the hero pushes the real content too far down
  • App screens where the user already knows what they're here to do

Source

Web vernacular; standard term in marketing-site design.