Fast Facts

No counter animation

The "data-fast-facts-speed" attribute is set to zero.

100
Fast Fact #1
40,000
Fast Fact #2 Has a Really Long Title That Keeps on Going and Going
550
Fast Fact #3 

<div class="fast-facts" data-fast-facts-speed="0" id="">
    <div class="fast-fact">
        <a href="#">
            <figure class="fast-fact__image image">
                <img alt="" src="path/to/image.jpg" width="xxx" height="yyy" loading="lazy">
            </figure>
            <div class="fast-fact__amount">[Fast Fact Amount]</div>
            <div class="fast-fact__title">
                [Fast Fact Title]
            </div>
        </a>
    </div>
</div>

Has counter animation

The "data-fast-facts-speed" attribute is set to a non-zero value. In this case, it's "10000."

1,000
Fast Fact #4
5,000
Fast Fact #5
100
Fast Fact #6 

<div class="fast-facts" data-fast-facts-speed="[Counter Speed]" id="">
    [Fast fact containers here]
</div>

Class Reference

Class Info
fast-facts Primary container. Should be added to a div.
fast-fact Denotes a single fast fact. Should be added to a div.
fast-fact__image Denotes a single fast fact's image. Should be added to a figure.
fast-fact__amount Denotes a single fast fact's amount. Should be added to a div.
fast-fact__title Denotes a single fast fact's title. Should be added to a div.