Factoid

JSThis component requires JavaScript.

A Factoid highlights a compelling, but brief numerical fact.

Factoids are often used on a Landing page layout, such as a homepage, campaign page or section index page to highlight one or more numerical facts. They can be displayed in a row or among other components.

Example

• 200+ lorem ipsum dolor sit amet, consectetur adipiscing elit
• #1 lorem ipsum dolor sit amet, consectetur adipiscing elit
• 9^th lorem ipsum dolor sit amet, consectetur adipiscing elit

<ul class="bux-factoid bux-animate--reveal-group" data-stagger-step="200" data-stagger-start="0">
  <li class="bux-factoid__item">
    <span class="bux-factoid__stat bux-animate--reveal">
      200+
    </span>
    <span class="bux-factoid__text">
      lorem ipsum dolor sit amet, consectetur adipiscing elit
    </span>
  </li>
  <li class="bux-factoid__item">
    <span class="bux-factoid__stat bux-animate--reveal">
      #1
    </span>
    <span class="bux-factoid__text">
      lorem ipsum dolor sit amet, consectetur adipiscing elit
    </span>
  </li>
  <li class="bux-factoid__item">
    <span class="bux-factoid__stat bux-animate--reveal">
      9<sup>th</sup>
    </span>
    <span class="bux-factoid__text">
      lorem ipsum dolor sit amet, consectetur adipiscing elit
    </span>
  </li>
</ul>

{#
Buckeye UX - version 1.4.3
Copyright (C) 2026 The Ohio State University
#}

{# 

Factoid

Available variables:

- items:        Array containing the factoid list items.
- item.stat:    Statistic for the item.
- item.text:    Descriptive text for the item.
- animate:      Set to true to enable animations.

#}

<ul class="bux-factoid {% if animate %}bux-animate--reveal-group{% endif %}" 

    {%- if animate -%}
        data-stagger-step="200" data-stagger-start="0"
    {%- endif -%}
    >
	{% for item in items %}	
		<li class="bux-factoid__item">
			<span class="bux-factoid__stat {% if animate %}bux-animate--reveal{% endif %}">
				{{ item.stat }}
			</span>
			<span class="bux-factoid__text">
				{{ item.text }}
			</span>
		</li>
	{% endfor %}
</ul>

Usage

Dos

• Use ideally on a Landing Page Layout, following a Hero Image, Featured Card or other visual component
• Use a numerical value for the large figure
• Always provide supporting description for the large figure

Don’ts

• Don’t use lengthy words as the large figure