Skip to main content
Rivet Design System Indiana University

Stat

Highlight one or more compelling statistics

Overview #

Use the stat component to highlight one or more compelling statistics.

Stats are often used on website home pages or section index pages, especially those that relate to career placement and campus culture.

Examples #


Open in new window
Copy link to example 
<a href="#" class="rvt-stat">
  <div class="rvt-stat__content [ rvt-flow ]">
    <div class="rvt-stat__image">
      <div class="rvt-avatar">
        <img class="rvt-avatar__image" src="https://rivet.iu.edu/img/placeholder/avatar-1.webp" alt="">
      </div>
    </div>
    <div class="rvt-stat__number">100,000</div>
    <div class="rvt-stat__description">Undergraduate students at our flagship campus</div>
  </div>
</a>
Open in new window
Copy link to example 
<div class="rvt-stat-group">
  <a href="#" class="rvt-stat">
    <div class="rvt-stat__content [ rvt-flow ]">
      <div class="rvt-stat__number">20</div>
      <div class="rvt-stat__description">Residence halls</div>
    </div>
  </a>
  <a href="#" class="rvt-stat">
    <div class="rvt-stat__content [ rvt-flow ]">
      <div class="rvt-stat__number">200</div>
      <div class="rvt-stat__description">Degree programs</div>
    </div>
  </a>
  <a href="#" class="rvt-stat">
    <div class="rvt-stat__content [ rvt-flow ]">
      <div class="rvt-stat__number">2000</div>
      <div class="rvt-stat__description">Faculty</div>
    </div>
  </a>
  <a href="#" class="rvt-stat">
    <div class="rvt-stat__content [ rvt-flow ]">
      <div class="rvt-stat__number">20000</div>
      <div class="rvt-stat__description">Students</div>
    </div>
  </a>
</div>

Elements #

Element Description Usage Required Multiple
Image Image to show above the stat number Use an avatar or sticker

Image is optional

Component may contain only one Image
Number Statistic to highlight Use a number, percentage, or ratio. Avoid running text.

Number is required

Component may contain only one Number
Description Description of the highlighted number, percentage, or ratio Limit to a few words

Description is required

Component may contain only one Description

Usage #

Do

  • Use to highlight compelling statistics

Don't

  • Mix and match different image sizes in the same stat group