Skip to main content

Hero Area

A prominent feature at the top of a webpage that features a large image or video, a headline, and a call to action.

On this page

Example

Student Life at U-M

Elit proin nunc nibh elit viverra risus imperdiet pellentesque. At quis nulla arcu porttitor et. At a consequat porta pellentesque orci pretium vel est. Neque enim consectetur et augue ullamcorper. Facilisis faucibus bibendum ultrices feugiat.
Button
Button
The flag on top of the Michigan Union on a bright morning. Students sit in the Michigan Union’s enclosed courtyard. Two students walk near the Law Quad at sunset. One of the covered walkways in the Law Quad. Two hanging fossils in the Museum of Natural History
The flag on top of the Michigan Union on a bright morning. Students sit in the Michigan Union’s enclosed courtyard. Two students walk near the Law Quad at sunset. One of the covered walkways in the Law Quad. Two hanging fossils in the Museum of Natural History

When to use

A hero is used on a homepage to draw attention and set the tone of the site. The call to action provides navigation to an important area of the site.

Guidelines

The hero message should communicate your main value proposition within seconds. Use high-quality imagery or video that supports your message. Ensure sufficient contrast between text and background so content remains readable. You should not put text directly within a hero image file; instead, use the text field in the hero component.

Accessibility

If using a video with autoplay, make sure there is a pause button and that the video doesn’t play automatically for longer than five seconds. Include alternative text on any images.

Component Cheat Sheet

[Hero - Carousel]

Heading:

Text:

[Button #/#]

Button Text:

Link:

[Image #/#]

Image Alt Text: