Factoid

Component status:Ready

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">
  <li class="bux-factoid__item">
    <span class="bux-factoid__stat"> 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"> #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"> 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.0.15
Copyright (C) 2024 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.

#}

<ul class="bux-factoid">
	{% for item in items %}	
		<li class="bux-factoid__item">
			<span class="bux-factoid__stat">
				{{ 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