Skip to main content

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 #


<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://v2.rivet.iu.edu/img/placeholder/avatar-1.jpg">
</div>
</div>
<div class="rvt-stat__number">100,000</div>
<div class="rvt-stat__description">Undergraduate students at our flagship campus</div>
</div>
</a>
<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 or .png avatar images

Don't

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