Studiov1.2.3
Studio/Patterns/Hero Section

Hero Section

Hero

Full-bleed hero with background image or gradient overlay, headline, subtext, and call-to-action buttons. Sets the visual tone for a page.

All patterns

Reusable section headline

A token-bound hero pane with constrained copy, action hierarchy, and responsive stacking.

Primary actionSecondary
Use Cases
  • Landing page first impression
  • Product launch announcements
  • Campaign pages with strong visual identity
  • Portal homepages (PRT, Place Fund, Zoen)
Do
  • Use a high-quality background image or brand gradient
  • Keep headline under 10 words
  • Limit to 2 CTA buttons maximum
  • Use brand accent color for primary CTA
  • Add alt text to background images
Avoid
  • Stack more than 3 lines of body text
  • Use low-contrast text over busy images without overlay
  • Place form inputs inside the hero
  • Use animation on every element simultaneously
Reference component: HeroSectionVariants: 3Token bindings: 5