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.3.1
Copyright (C) 2025 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