Fact Boxes

Example


Code

HTML

<div class="fact-box-set">
    <aside class="fact-box color-changer-init">
        <dl>
            <dt class="fact-box-title border-color">Fact Box Title</dt>
            <dd class="fact-box-info">
                <div class="fact-box-info-number">00</div>
                <div class="fact-box-info-noun">Noun</div>
                <div class="fact-box-info-text">Fact box text goes here.</div>
            </dd>
        </dl>
    </aside>
    <aside class="fact-box color-changer-init">
        <dl>
            <dt class="fact-box-title border-color">Fact Box Title</dt>
            <dd class="fact-box-info">
                <div class="fact-box-info-number">00</div>
                <div class="fact-box-info-noun">Noun</div>
                <div class="fact-box-info-text">Fact box text goes here.</div>
            </dd>
        </dl>
    </aside>
    <aside class="fact-box color-changer-init">
        <dl>
            <dt class="fact-box-title border-color">Program Exams</dt>
            <dd class="fact-box-info">
                <div class="fact-box-info-number">03</div>
                <div class="fact-box-info-noun">Exams</div>
                <div class="fact-box-info-text">You must pass an exam for each level of curriculum.</div>
            </dd>
        </dl>
    </aside>
    <aside class="fact-box color-changer-init">
        <dl>
            <dt class="fact-box-title border-color">Global Coverage</dt>
            <dd class="fact-box-info">
                <div class="fact-box-info-number">90+</div>
                <div class="fact-box-info-noun">Locations</div>
                <div class="fact-box-info-text">CFA Institute operates in over 90 countries and regions.</div>
            </dd>
        </dl>
    </aside>
</div>
        

Documentation

Problem Being Solved

Users need to view dynamic information in a compelling presentation.

When To Use

The fact box should be used to display short, quickly scannable text. There should be benefit to showcasing the information.

When Not To use

The fact box should not be used to display long text, or text that is of lesser importance.

Formatting

  • The fact box set is now using CSS grid. This will handle all the spacing and fit each fact box in the available space accordingly.
  • We need info describing how the new color change init cycler is being used/ how it works.
  • Color cycle restarts after the fourth fact box.