Billboard

Highlight content with an image, text summary, and call to action

Overview #

Use the billboard component to highlight news articles, student or alumni stories, or other important content on your website.

A billboard contains an image, title, summary text, and optional call to action link.

Billboards are often used on website home pages, section index pages, and landing pages for marketing campaigns.

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-billboard">
  <div class="rvt-billboard__image">
    <img src="https://rivet.iu.edu/img/placeholder/billboard-2.webp" alt="Student in vintage-style Indiana University t-shirt">
  </div>
  <div class="rvt-billboard__body">
    <h2 class="rvt-billboard__title">Become the best version of yourself at IU</h2>
    <div class="rvt-billboard__content [ rvt-flow ]">
      <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>
      <a class="rvt-cta" href="#">Explore more of IU</a>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-billboard rvt-billboard--reverse">
  <div class="rvt-billboard__image">
    <img src="https://rivet.iu.edu/img/placeholder/billboard-2.webp" alt="Student in vintage-style Indiana University t-shirt">
  </div>
  <div class="rvt-billboard__body">
    <h2 class="rvt-billboard__title">Become the best version of yourself at IU</h2>
    <div class="rvt-billboard__content [ rvt-flow ]">
      <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>
      <a class="rvt-cta" href="#">Explore more of IU</a>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-billboard">
  <div class="rvt-billboard__image">
    <img src="https://rivet.iu.edu/img/placeholder/billboard-2.webp" alt="Student in vintage-style Indiana University t-shirt">
  </div>
  <div class="rvt-billboard__body">
    <h2 class="rvt-billboard__title">Become the best version of yourself at IU</h2>
    <div class="rvt-billboard__content [ rvt-flow ]">
      <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>

Open in new window Copy link to example

<div class="rvt-billboard">
  <div class="rvt-billboard__body">
    <h2 class="rvt-billboard__title">Become the best version of yourself at IU</h2>
    <div class="rvt-billboard__content [ rvt-flow ]">
      <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>
      <a class="rvt-cta" href="#">Explore more of IU</a>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-billboard rvt-billboard--center">
  <div class="rvt-billboard__body">
    <h2 class="rvt-billboard__title">Become the best version of yourself at IU</h2>
    <div class="rvt-billboard__content [ rvt-flow ]">
      <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>
      <a class="rvt-cta" href="#">Explore more of IU</a>
    </div>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-billboard">
  <div class="rvt-billboard__body">
    <h2 class="rvt-billboard__title">Become the best version of yourself at IU</h2>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-billboard rvt-billboard--center">
  <div class="rvt-billboard__body">
    <h2 class="rvt-billboard__title">Become the best version of yourself at IU</h2>
  </div>
</div>

Elements #

Element	Description	Usage	Required	Multiple
Image	Billboard image that appears to the right or to the left of the text	Use an image with a `3:2` aspect ratio	Image is optional	Component may contain only one Image
Title	Billboard title that appears above the content	Limit to a short phrase	Title is required	Component may contain only one Title
Content	Billboard text that appears beneath the title	Limit to 1-2 short sentences	Content is optional	Component may contain only one Content
Call to action	Call to action link that appears beneath the content	Limit link text to a few words. Do not use a CTA button.	Call to action is optional	Component may contain only one Call to action

Usage #

Image, summary text, and call to action link are optional. You can omit the elements with the .rvt-billboard__image, .rvt-billboard__content, and .rvt-cta classes if you don’t need them.

Do

Use to call attention to the most important features, articles, or stories on your page
Use on pages where the content fills the full width of the layout
Alternate between left- and right-positioned images with the .rvt-billboard--reverse modifier class when using multiple billboards in a row

Don't

Use the billboard title for every heading on your page—only use it to emphasize the most important content sections
Use the .rvt-billboard--center modifier class on a billboard with an image
Use on pages where the content area is too narrow because of a sidebar, side navigation, or similar element
Stack multiple billboards to create a feed or ticker—use a horizontal card feed instead

Accessibility #

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