Hero

The hero is the top section of your page. It holds your title, an image, and copy that introduces the reader to what they’ll find on the page.

This is your opportunity to grab their attention and entice them to begin their journey.

Tips

Craft a benefit-focused title so visitors are inspired to read through your whole page.
Choose an image that illustrates the topic of your page or the offer you're making.
Ensure the image you use has alt text before you bring it into your page.
Use compelling copy that keeps visitors on the page and/or drives them to action.
If you use a button/link, make sure the words convey a clear directive to act.
The Hero component can also be used as a text-only component; an image is not required.
Do not use the H1 heading in a hero that is not at the top of a page.

A Hero component at the top of the page needs the H1 headline level. The image is always on the right side of the hero.
A text-only Hero component centers its text block on the page.

Select the "With Button?" checkbox under the Description field.

Deselect the "With Image?" checkbox at the top of the Hero chunk.

We look forward to your feedback!

Questions

Email your questions to dccamp@iu.edu.
Bug report

Help improve this component by submitting a bug report to github.iu.edu.
Feature request

Help make this component better fit your needs by submitting a feature request to github.iu.edu.