Factoids, Rankings and Statistics

Highlight an important fact, data point, or ranking

As an institution of higher learning and research, we have a lot of useful data and information to share with the public, and accomplishments we can tout. Use these highly visual callouts to do it.

Usage

Usability Guidance

  • Limit each callout to a single factoid, statistic or ranking.
  • Provide a source if the data or ranking comes from another program or institution.

Accessibility Requirements

  • Use the <aside> element to denote factoids and statistics as standalone content.

Factoid

Anatomy

Factoid Anatomy Image
  1. Factoid Text (required)
  2. Border (required)
  3. Container (required)

Specs

Factoid Specs Image

Code

Rankings

Anatomy

Rankings Anatomy Image
  1. Ranking Text (required)
  2. Descriptor Text (required)
  3. Source Text (required)
  4. Border (required)
  5. Container (required)

Specs

Rankings Specs Image

Code

Statistics

Anatomy

Statistics Anatomy Image
  1. Value Text (required)
  2. Descriptor Text (required)
  3. Container Text (required)
  4. Numerator Text (required for 2 variable statistics)
  5. Parameter Text (required for 2 variable statistics)
  6. Denominator Text (required for 2 variable statistics)

Variations

Statistics Variations Image

Specs

Statistics Specs Image

Code

<div class="stat-wrapper clearfix">
  <div class="stat-tout">
    <span class="stat-tout__number">31,000</span>
    <span class="stat-tout__label">Undergraduate Students</span>
  </div>
</div>