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 #

Choose an example

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>

Usage #

Avatar is optional. You can omit the element with the .rvt-stat__image class if you don’t need it.

Do

Use to highlight compelling statistics
Keep stat labels brief
Use with .jpg, .png, or .webp avatar images

Don't

Use a non-square avatar image
Mix and match different avatar image sizes in the same stat group