Changes to the Hero component
The hero component in HarvardSites Drupal is changing. Here’s what you need to know.
- Beginning in mid-June, 2026, the Hero Component 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 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.
Where this data comes from
Our own data
Analytics across 2,000+ HarvardSites Drupal sites.
External research
Nielsen Norman Group: 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.
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 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.
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.
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.
If your page needs to highlight more than one action or priority, consider Vertical Cards, 50/50 Cards, Button-Style Cards, or 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.
- Open the page and review the current Hero in the editing view.
- Keep the image and message that matter most as the Currently Displayed hero item.
- Review any Not Currently Displayed hero items and decide whether that content should be removed or reused elsewhere on the page or site.
- 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.