Heroes/Hero Section

Overview

A Hero is a large, high-visibility content block placed at the top of a webpage. It typically includes a relevant image, short text, and sometimes buttons. 

• Functions as the page’s visual “headline” 
• Used only once, and only at the top of a page 
• Optional—many pages begin with headline text instead 
• Designed to orient users quickly to the page’s purpose 

Please visit the guide entries for Split-Screen Hero and Text-Based Hero to read more specific information on the two component variants. 

Heroes Usage Guidelines

When to Use 

• Use at the top of a webpage to create a strong visual impression 
• Use to introduce a key message 
• Use to highlight a primary action (“Apply Now”, “Make an Appointment”) 
• Use to provide immediate context for the page’s purpose to a user 

When to Avoid 

• Do not use if the content is too brief to warrant a dedicated hero section. 
• Avoid when users need to quickly scan and access information above the fold without distractions. 
• Avoid when there isn’t a strong visual or clear, strategic message to feature. 
• Omit when the page is primarily transactional and users need to complete their tasks as efficiently as possible: 
  • Portals where fast access and login are crucial. 
  • Internal tools such as scheduling, search tools, search results, or dashboards. 
  • Lead capture pages 
  • Download pages 

Component Types

Split-Screen Hero

Purpose: The more commonly used Hero type. The split-hero features an image, supporting text, and optional buttons. It’s a versatile, balanced layout that works well for most page types. 

Best Used: On most pages 

For guidance on styling, guidelines, layout, and content, please visit Split-Screen Hero.

Text-Based Hero

Purpose: Used on landing and directory pages to foreground key messaging. Text-based heroes feature a large white content block over a full-width image. It includes a headline and subtitle, but does not contain buttons.  

Best Used: When text – not an action or an image – is the primary anchor for the page. 

For guidance on styling, guidelines, layout, and content, please visit Text-Based Hero.

Support

If you want support on the best way to organize information on a webpage, improve accessibility and user experience, or need guidance on following the website’s content and style guidelines, contact the Digital Experience team.   

If you want to know the technical specifications of a component or want to know how a particular website feature works behind the scenes, visit the Component Library or contact the WebOps team.