Skip to main content

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.

$description

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.

How-to guide

Add a button/link

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

checkbox of with button?


Use Hero as a text-only component

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

un-select checkbox of with image?

Contact us

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.