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>

<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