Skip to main content
Rivet Design System Indiana University

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.


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>

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 an image with a 3:2 aspect ratio (such as 600×400)
  • 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

  • Put several paragraphs of text
  • 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
  • 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 billboard image. See the WebAIM website for more information on writing alternative text for images.