# Hero ## expand\_more Purpose of the Hero ### Highlight a primary message or page identity at the top of a page This component creates a strong visual introduction, helping users immediately understand the purpose or focus of a page. ![Hero component in page layout](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-02/Heror.png?itok=An0mTDqb) *Example page context showing where a Hero is typically used* ## ✓ Use this component when: - You need a **strong visual introduction** at the top of a page - A page has a single, clear primary focus - An image meaningfully reinforces the message - You want to establish tone, theme, or context immediately ## ✕ Avoid using this component when: - The page contains multiple equal priorities - You need dense or highly scannable content at the top - The image is decorative and does not add context - The primary goal is navigation (use Button-Style Cards or CTA Links) ## Choosing between similar components If your goal is… SortYour goalUse this componentCreate a strong visual headline Hero Feature one story, event, or initiative 50/50 Card Provide quick links or actions Button-Style Cards Emphasize a next step Call to Action Links ## Hero overview A Hero component is a banner element that displays an image and information at the top of a page. Heroes are often used on home pages and landing pages to highlight important stories and other website content. ## Example: Introducing a page’s primary focus This example shows a Hero used to introduce a page with a clear, central focus. The image reinforces the theme, and the heading communicates the main message immediately. ### Early printing exhibits Harvard Libraries Learn the history and technology of printing from moveable type. [ arrow\_forward Explore the “Harvard by Hand: The Bow & Arrow Press at 45” exhibit ](https://library.harvard.edu/exhibits/harvard-hand-bow-arrow-press-45) [ arrow\_forward Attend a “Print Your Own Exhibition Keepsake” workshop ](https://libcal.library.harvard.edu/event/12975400) ![Closeup of hands arranging type pieces and compartments filled with collections of movable type.](/sites/g/files/omnuum631/files/styles/hwp_28_10__1920x685/public/2024-11/hero%20image.jpg?itok=UuYiwTGC) ## Elements of a Hero SortElementPurposeImage Displays as background image Eyebrow Describes the topic category Heading Describes the topic of the Hero Text Provides descriptive details about the topic Call to action links Links to more details about the topic Pagination Provides controls to navigate multiple Hero items ## Guidance on using a Hero - **Use for site and page orientation.** Use a Hero as a banner at the top of a homepage or section landing page to orient users to the purpose of the site and site sections. - **Include relevant and compelling imagery.** Highlight compelling images that reinforce the site identity and purpose. - **Use high-resolution images.** Use high-resolution images that fit well within the Hero aspect ratio. - **Use static images.** Don’t use an animated image or video for the Hero image. - **Don’t use images that include text.** Instead, use the text panel to provide text content. - **Leave space for text.** When including text, use an image that allows space for the text panel. Don’t cover main elements of the Hero image with the text panel. - **Optimize text contrast.** Use a solid background for the text panel and a high-contrasting text color. - **Use clear language.** Use short, concise, and active language in the Hero text. - **Include calls to action.** Use call-to-action links when appropriate, to provide a path to more details. ## Content guidelines **Write concise headings** Headings should clearly communicate the page’s primary focus. **Keep supporting text brief** Provide only essential context beneath the heading. **Use meaningful calls to action** If included, ensure the CTA aligns with the page’s primary goal. **Ensure visual contrast** Text must remain legible against background imagery. ## Accessibility considerations - Ensure sufficient color contrast between text and background - Avoid placing essential text directly over complex imagery - Provide descriptive alternative text for images - Ensure keyboard and screen reader accessibility for any included CTAs ## Hero features SortFeaturesStandardsNo support for animated images or video Static Backgrounds Solid background for text panels Solid Backgrounds Optimized color contrast Minimum Contrast Left-aligned headings and text Text Block Alignment Background color, icons, and underlining used to indicate links Link Indicators Sans serif typeface used for CTA links Wayfinding Font ### Design Research Insights Learn about our exploration into the [implications of autoplaying background videos and animations](/news/2025/02/autoplaying-hero-background-videos-digital-design "Autoplaying Hero Background Videos in Digital Design"), and how those insights inform the Restricted Motion standards and guidelines. ![](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-03/DS%20Website%20icons%20_Insights.png?itok=AOjjVxll) [### Hero component: Styles, sizes, and best practices ](https://drupal.harvardsites.harvard.edu/resource/hero-component-styles-sizes-and-best-practices-video)User Guide Video This video explains the different hero layout options and best practices for using hero components. ![](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-04/Hero_0.png?itok=xbt6CNIW) See also:- [ Components ](/page-categories/components) ## Hero Showcase ### Hero with a text panel below the image expand\_more This example shows the Hero component with the text card in a full-width panel below the image. #### Exhibits and workshops in early printing Harvard Libraries Learn the history and technology of printing from moveable type, set type, and a operate a handpress to print a keepsake. [ arrow\_forward Explore the “Harvard by Hand: The Bow & Arrow Press at 45” exhibit ](https://library.harvard.edu/exhibits/harvard-hand-bow-arrow-press-45) [ arrow\_forward Attend a “Print Your Own Exhibition Keepsake” workshop ](https://libcal.library.harvard.edu/event/12975400) ![Closeup of hands arranging type pieces and compartments filled with collections of movable type.](/sites/g/files/omnuum631/files/styles/hwp_28_10__1920x685/public/2024-11/hero%20image.jpg?itok=UuYiwTGC) ### Hero with a text panel overlaying the image expand\_more This example shows the Hero component with the text card floating on top of the image. Note that the text card displays below the image on mobile. #### Exhibits and workshops in early printing Harvard Libraries Learn the history and technology of printing from moveable type, set type, and a operate a handpress to print a keepsake. [ arrow\_forward Explore the “Harvard by Hand: The Bow & Arrow Press at 45” exhibit ](https://library.harvard.edu/exhibits/harvard-hand-bow-arrow-press-45) [ arrow\_forward Attend a “Print Your Own Exhibition Keepsake” workshop ](https://libcal.library.harvard.edu/event/12975400) ![Closeup of hands arranging type pieces and compartments filled with collections of movable type.](/sites/g/files/omnuum631/files/styles/hwp_28_10__1920x685/public/2024-11/hero%20image.jpg?itok=UuYiwTGC)