Fact Boxes

Example


Code

HTML

<section class="grid-container">
    <div class="fact-box-set full-width">
        <aside class="fact-box color-changer-init">
            <dl>
                <dt class="fact-box-title border-color">Fact Box Title</dt>
                <dd class="fact-box-stats">
                    <div class="fact-box-stats-stat">00<span class="fact-box-stats-stat-node"></span></div>
                    <div class="fact-box-stats-label">LABEL</div>
                    <div class="fact-box-stats-description">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-stats">
                    <div class="fact-box-stats-stat">00<span class="fact-box-stats-stat-node"></span></div>
                    <div class="fact-box-stats-label">LABEL</div>
                    <div class="fact-box-stats-description">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-stats">
                    <div class="fact-box-stats-stat">03<span class="fact-box-stats-stat-node"></span></div>
                    <div class="fact-box-stats-label">Exams</div>
                    <div class="fact-box-stats-description">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-stats">
                    <div class="fact-box-stats-stat">90<span class="fact-box-stats-stat-node">+</span></div>
                    <div class="fact-box-stats-label">Locations</div>
                    <div class="fact-box-stats-description">CFA Institute operates in over 90 countries and regions.</div>
                </dd>
            </dl>
        </aside>
    </div>
</section>
        

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

  • Place fact box set inside section that has the class name "grid-container"
  • 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.
  • If you don't have a description for the fact-box you don't have to fill that element in, but leave the element in place (removing it will mess up the grid layout).
  • Color cycle restarts after the fourth fact box.
  • Make sure each aside has the class name "color-changer-init."
  • Make sure each fact-box title has the class name "border-color."