# Hero ## expand\_more ## How to add a Hero component ### Step 1: Add and configure Hero component 1. Add a Hero component (see [Adding a component](/adding-component "Adding a component") for instructions on how to add a component). 2. Select the **Block Settings** tab. 3. Select a style from the **Style** menu: 1. **Floating:** Display text and images in a card overlaying the image. 2. **Stacked**: Display text and links in a card overlapping the bottom left of the image. 3. **Split Horizontal**: Display text and links in a full-width panel below the image. 4. **Split Vertical**: Display text and links in a full-height panel to the left of the image. 4. Select **Large**, **Medium**, or **Small** from the **Hero Size** menu. 5. Add an optional **Page Anchor Link** to allow for links to the Hero component (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")). ### Step 2: Add a Hero item Please note that the Hero component [only supports one visible item at a time](/news/2026/05/changes-hero-component "Changes to the Hero component"). 1. Select the **Content** tab and select the **Add Hero** button. 2. Fill out the following information for the text overlay: 1. **Eyebrow**: Keywords that display above a heading. This could be the site section or page topic category. 2. **Heading**: A heading that captures the topic of the page. The heading should be clear and descriptive. 3. **Body**: Introductory text that further describes the topic of the page. This should be no more than a few sentences. 3. Set the heading level using the **Heading Level** menu. 1. If the Hero is being used at the top of the page and includes the page title, the heading level should be H1. (Note that there should only be one H1 per page.) 2. If a Hero is used farther down on the page for regular content, we recommend using H2 in most cases to introduce a new section, and H3 for subsections. 4. Next add an image to the component by selecting the **Add image** button. You can select an image from the media library or upload a new image (see [Media Library](/resource/media-library "Media Library") for details about working with the media library). 1. The optimal image size (in pixels) for a Hero component is 3840 x 1650 (see [Image Sizes](/resource/image-sizes-old "Image Sizes") for more details). 5. Provide the appropriate alternative text or mark the image as decorative, depending on the role of the image on the page (see [When to add alt text](/resource/when-add-alt-text "When to add alt text") for best practices for providing alternative text). 6. Select the **Add Call to Action Link** button to add up to two (2) call to action links to the text overlay (for instructions, see **Step 2: Add Call to Action Links** on [Adding a component heading](/adding-section-heading "Adding a section heading")). ### Step 3: Configure Hero item settings 1. Select the **Block Settings** tab. 2. Select an alignment from the **Text Card Alignment** menu to align the text overlay to the **Left**, **Center**, or **Right** of the image. Note that this setting only applies to Hero items within a Hero component provided using the **Floating** style. 3. Add an optional **Page Anchor Link** to allow for links to the Hero item (see instructions under [L](https://drupal.harvardsites.harvard.edu/linking-page-content)[inking to page content](/linking-page-anchor-links "Linking to on-page anchor links")). This feature is useful for Hero components with multiple Hero items, allowing for links to, for example, the third Hero item in a four-item Hero component. 4. Select the **Color Settings** tab. 5. Select a color scheme from the **Hero Color Scheme** menu and review the **Color Component Scheme Preview** to see the effect of changing the color settings. For Hero items, the color scheme affects the colors used in the text overlay. 6. Once you have completed your Hero item configuration settings, choose **Save** to save the Hero item. ### Step 4: Save Hero component 1. Preview the Hero item in the **Heroes** section of the **Create new Hero** dialog. 2. Once you have finished adding your Hero item, choose **Save** to save the Hero component. [### Hero component: Styles, sizes, and best practices (VIDEO) ](/resource/hero-component-styles-sizes-and-best-practices-video)Understanding the options available in the Hero component and best practices. ![a tablet computer showing a website](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2026-05/pexels-pixabay-39559.jpg?itok=-VFJXOhB) --- ## Learn more about the Hero component ### Examples Demo Site See examples of the Hero component on the [homepage](https://drupaldemo.harvardsites.harvard.edu/#example-hero), [Research landing page](https://drupaldemo.harvardsites.harvard.edu/research#example-hero), and [Graduate content page](https://drupaldemo.harvardsites.harvard.edu/graduate#example-hero) on the Department of Rocket Science demo site. ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/Firefly%20rocket%20in%20space%209486.jpg?itok=zBGEAUN2) ### Best Practices Design System Website Learn [best practices for using the Hero component](https://designsystem.harvardsites.harvard.edu/hero) from the Harvard Digital Design System website. ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2025-03/DSWebsiteIconNew.png?itok=HPgxFa1d) ### Accessibility Digital Accessibility Website Review guidance on [using images and media to enhance understanding](https://accessibility.huit.harvard.edu/use-images-and-media-enhance-understanding) and learn how to [write helpful alt text to describe images](https://accessibility.huit.harvard.edu/describe-content-images) from the Harvard Digital Accessibility website. ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/thumb_das.png?itok=j55tHWpY) See also:- [ Components ](/site-section/components) - [ How-tos ](/content-structure/how-tos)