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.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Factoid

Available Variables:
  - animate:  Boolean. Set to true for animations.
  - items:    Array of factoids: stat, text.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 04-01-2026 14:24:18
#}

<ul
  class="bux-factoid{{ animate ? ' bux-animate--reveal-group' : '' }}"
  {{ animate ? 'data-stagger-step="200" data-stagger-start="0"' : '' }}
>
  {% for item in items %}
    <li class="bux-factoid__item">
      {% if item.stat %}
        <span class="bux-factoid__stat{{ animate ? ' bux-animate--reveal' : '' }}">{{ item.stat }}</span>
      {% endif %}
      <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