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>

Elements #

Element	Description	Usage	Required	Multiple
Eyebrow	Text that appears above the title in smaller text	Limit to 1-2 words. Ideal for category or topic names.	Eyebrow is optional	Component may contain only one Eyebrow
Title	Hero title that appears above content	Limit to a short phrase	Title is required	Component may contain only one Title
Teaser	Text content below the title that entices the user to perform one of the calls to action	Limit to 1-2 short sentences. Avoid paragraph breaks.	Teaser is required	Component may contain only one Teaser
Call to action button	Call to action link that appears beneath the teaser	Limit button text to a few words	Call to action button is optional	Component may contain only one Call to action button
Media	Image or video that appears next to the text content	Use an image or embedded video with a `3:2` aspect ratio	Media is optional	Component may contain only one Media

Usage #

Do

Use to orient a visitor to your page's content and highlight your most important call to action

Don't

Use anywhere other than the top of your page. If you need to highlight content in the middle of a page, use a billboard instead.

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.