# Changes to the Hero component The hero component in HarvardSites Drupal is changing. Here’s what you need to know. May 08, 2026 - Beginning in mid-June, 2026, the [Hero Component](https://designsystem.harvardsites.harvard.edu/hero) will only support one image, one primary message, and up to three call to action links. - This change is based on usage data drawn from analytics and traffic metrics across more than 2,000 HarvardSites Drupal sites. - Our data shows that on average, only **10% of site visitors** click past the first Hero image. [Nielsen Norman Group's research on carousels](https://www.nngroup.com/articles/designing-effective-carousels/) supports this, finding that users frequently scroll past multi-image carousels and engage only with the first frame if any at all. Research on carousel usability shows that visitors often scroll past them and may never see content beyond the first frame or "slide." That means later messages are easy to miss. ## Accessibility issues with the multi-slide Hero Our accessibility research has flagged several WCAG issues with the multi-slide hero component. ### Confusing structure and navigation order Screen reader users may experience content in the wrong sequence or miss context. ### Focus does not behave as expected Focus does not reset to new content after paging, which can be disorienting. Issues with keyboard navigation. ### Incorrect labels, roles, and heading levels Some elements have incorrect or inconsistent labels, roles, and heading levels, which can make the component harder to understand for assistive technologies. ## What our analytics tell us ### Only 10% of site visitors click to see additional hero items 1 in 10 site visitors clicks to see the next hero item or "slide." Everybody else scrolls past the hero. ![ten percent](/sites/g/files/omnuum1651/files/styles/hwp_1_1__480x480/public/2026-05/AdobeStock_138369050.jpeg?itok=ygkdASO5) ## Where this data comes from ### Our own data Analytics across 2,000+ HarvardSites Drupal sites. ### External research [Nielsen Norman Group](https://www.nngroup.com/articles/designing-effective-carousels/): users typically engage only with the first frame, if any. ### Implication Anything we put in frames 2, 3, or 10 is, in effect, hidden from roughly 9 out of 10 visitors. ## Hidden content creates real risk Content placed in frames most visitors never reach isn't just unseen — it works against the page. ### Important messages get buried Editors place key announcements in later frames expecting equal weight. ### Mixed signals on the page Multiple competing Hero messages dilute focus and make it harder for visitors to know what matters most. ### Inequitable experience Users on assistive tech are even less likely to reach later frames. Additional benefit ### Vertical spacing Editors and visitors have told us the multi-image Hero takes up too much real estate at the top of the page. Removing the pager helps reduce that space. ![a person using a cell phone](/sites/g/files/omnuum1651/files/styles/hwp_1_1__480x480/public/2026-05/AdobeStock_975404085.jpeg?itok=4LIhJ80R) ## A focused, single-slide Hero The Hero's purpose stays the same: a strong visual introduction, a clear headline, supporting text, and clear next steps. ## Before ### Multi-slide Hero - Multiple primary and secondary images - Multiple competing messages - Many calls-to-action - Pager takes more vertical space - Accessibility barriers ## After ### Single-slide Hero - One image - One primary message - One to three call-to-action links - Tighter, more focused layout - Clear, accessible reading order and focus / keyboard issues resolved ## What you'll see Nothing is deleted. Existing Heroes stay editable through the transition. ![screenshot of a hero component with active and inactive items](/sites/g/files/omnuum1651/files/styles/hwp_1_1__960x960_scale/public/2026-05/Screenshot%202026-05-26%20at%201.50.08%E2%80%AFPM.png?itok=QTtht0Rk) The new hero will show a single item as **Currently Displayed**. Subsequent hero items will be hidden, and labeled as **Not Currently Displayed**. ## How to select the hero item to display If you have multiple hero items, just move the item to be displayed (either using the drag-and-drop control or the arrow keys) to the top. This will make the first hero item the one that your site visitors will see. ![screenshot displaying a hero component with instructions on how to move it](/sites/g/files/omnuum1651/files/styles/hwp_1_1__960x960_scale/public/2026-05/Screenshot%202026-05-29%20at%202.05.43%E2%80%AFPM.png?itok=lf5cH1Vm) Use the hero item arrow keys or drag control to move the item you want to display to the top of the list of hero items. ## What will happen to my hero? If you use a hero component with multiple Hero images, the first image will remain active, while the rest of the hero images will be hidden from site visitors. **Nothing is deleted**; inactive items remain available in the editing interface to give you time to review and move content before the transition is finalized. ## What can I use instead of the hero? Consider these [alternatives to the multi-item hero](/resource/hero-component-alternatives "Hero component alternatives"). If your page needs to highlight more than one action or priority, consider [Vertical Cards](/vertical-cards "Vertical Cards"), [50/50 Cards](/5050-cards "50/50 Cards"), [Button-Style Cards](/button-style-cards "Button-Style Cards"), or [Call to Action Links](/call-action-links "Call to Action Links"). These components are designed for pages with multiple goals rather than one primary introduction. ## What should I do with my multi-image hero? For existing multi-item Heroes, the hero component will display only one active hero item, while additional items remain available in the **editing interface** as inactive until they are reviewed. 1. Open the page and review the current Hero in the **editing view**. 2. Keep the image and message that matter most as the **Currently Displayed** hero item. 3. Review any **Not Currently Displayed** hero items and decide whether that content should be removed or reused elsewhere on the page or site. 4. Preview the page and review the Hero image carefully. Make sure the crop keeps the most important part of the image visible across screen sizes and that text does not cover essential image content. The HarvardSites Design System also provides separate guidance on [keeping Hero images readable](https://designsystem.harvardsites.harvard.edu/hero).