Fact Boxes

Example

Code

HTML

<section class="fact-box-set">
    <aside class="fact-box">
        <dl>
            <dt class="fact-box-fact">
                1,005 jobs
            </dt>
            <dd class="fact-box-info">
                directly provided or indirectly supported.
            </dd>
        </dl>
    </aside>
    <aside class="fact-box">
        <dl>
            <dt class="fact-box-fact">
                $104.6 million
            </dt>
            <dd class="fact-box-info">
                in value added
            </dd>
        </dl>
    </aside>
    <aside class="fact-box">
        <dl>
            <dt class="fact-box-fact">
                $261 million
            </dt>
            <dd class="fact-box-info">
                in total industry output
            </dd>
        </dl>
    </aside>
    <aside class="fact-box">
        <dl>
            <dt class="fact-box-fact">
                $104.6 million
            </dt>
            <dd class="fact-box-info">
                in value added
            </dd>
        </dl>
    </aside>
    <aside class="fact-box">
        <dl>
            <dt class="fact-box-fact">
                $104.6 million
            </dt>
            <dd class="fact-box-info">
                in value added
            </dd>
        </dl>
    </aside>
    <aside class="fact-box">
        <dl>
            <dt class="fact-box-fact">
                $104.6 million
            </dt>
        </dl>
    </aside>
    <aside class="fact-box">
        <dl>
            <dt class="fact-box-fact">
                Martha Jefferson Renovation
            </dt>
            <dd class="fact-box-info">
                generated 132 jobs, $6.1 million in labor income, $8.4 million in value added, and $17.1 million in total industry output for the local economy
            </dd>
        </dl>
    </aside>
</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

  • Fact boxes use flex box to make stand alone boxes fit the available width, up to a set of three, before moving to the next row.
  • Color cycle restarts with each section.