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

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

Specs

Code

Rankings

Anatomy

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

Specs

Code

Statistics

Anatomy

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

Specs

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>