Hero

Prominently show a title, summary, image, and call to action at the top of a page

Overview #

Use the hero component to prominently show a title, summary, image, and call to action at the top of a page.

Hero areas are often used on website home pages to help orient the visitor to the site’s latest news or most important call to action. They are also useful for section index and marketing campaign landing pages.

Examples #

The examples on this page are best viewed in a new window.

Choose an example

Open in new window Copy link to example

<div class="rvt-hero">
  <div class="rvt-container-lg">
    <div class="rvt-hero__inner">
      <div class="rvt-hero__body [ rvt-flow ]">
        <span class="rvt-hero__eyebrow">Category</span>
        <h1 class="rvt-hero__title">Become the best version of yourself at IU</h1>
        <div class="rvt-hero__teaser">
          <p>Develop the skills you need for a rewarding career, and follow in the footsteps of more than 729,000 IU alumni who are leading organizations, innovating the future, and making an impact on their communities and the world.</p>
        </div>
        <div class="rvt-hero__actions">
          <a class="rvt-cta rvt-cta--button" href="#">Learn more about IU</a>
        </div>
      </div>
      <div class="rvt-hero__media">
        <img src="https://rivet.iu.edu/img/placeholder/hero-2.webp" alt="Person at desk coding a website">
        <div class="rvt-hero__media-caption">An optional image caption</div>
      </div>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-hero rvt-hero--bg-dark">
  <div class="rvt-container-lg">
    <div class="rvt-hero__inner">
      <div class="rvt-hero__body [ rvt-flow ]">
        <span class="rvt-hero__eyebrow">Category</span>
        <h1 class="rvt-hero__title">Become the best version of yourself at IU</h1>
        <div class="rvt-hero__teaser">
          <p>Develop the skills you need for a rewarding career, and follow in the footsteps of more than 729,000 IU alumni who are leading organizations, innovating the future, and making an impact on their communities and the world.</p>
        </div>
        <div class="rvt-hero__actions">
          <a class="rvt-cta rvt-cta--button" href="#">Learn more about IU</a>
        </div>
      </div>
      <div class="rvt-hero__media">
        <img src="https://rivet.iu.edu/img/placeholder/hero-2.webp" alt="Person at desk coding a website">
        <div class="rvt-hero__media-caption">An optional image caption</div>
      </div>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-hero">
  <div class="rvt-container-lg">
    <div class="rvt-hero__inner">
      <div class="rvt-hero__body [ rvt-flow ]">
        <span class="rvt-hero__eyebrow">Category</span>
        <h1 class="rvt-hero__title">Become the best version of yourself at IU</h1>
        <div class="rvt-hero__teaser">
          <p>Develop the skills you need for a rewarding career, and follow in the footsteps of more than 729,000 IU alumni who are leading organizations, innovating the future, and making an impact on their communities and the world.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Usage #

Caption is optional. You can omit the image caption by deleting the element with the .rvt-hero__image-caption class.

Do

Keep eyebrow, title, caption, and call to action text brief
Keep teaser text to 1–2 short sentences
Use an image with a 3:2 aspect ratio, like 900×600

Don't

Use several sentences of text for the eyebrow, title, teaser, or caption
Use an image you do not own the rights to—only use photos taken by your unit or downloaded from sites like Adobe Stock, Unsplash, or IU Visuals

Accessibility #

Use appropriate alternative text. Be sure to include alternative text for your hero image. See the WebAIM website for more information on writing alternative text for images.