UCLA Component Library

Statistic Touts: Statistics 

<!-- Statistic - single variable -->
<h3>Statistic - single</h3>
<aside class="stat-wrapper clearfix">
    <div class="stat-tout">
        <span class="stat-tout__number">31,000</span>
        <span class="stat-tout__label">Undergraduate Students</span>
    </div>
</aside>

<!-- Statistic - single, inline -->
<h3>Statistic - single, inline</h3>
<aside class="stat-wrapper clearfix">
    <div class="stat-tout stat-tout--inline">
        <span class="stat-tout__number">31,000</span>
        <span class="stat-tout__label">Undergraduate Students</span>
    </div>
</aside>

<!-- Statistic - multiple variable, usually inline, usually single -->
<!-- Use case: usually to highlight a SINGLE fact -->
<h3>Statistic - multiple variable</h3>
<aside class="stat-wrapper clearfix">
    <div class="stat-tout stat-tout--inline">
        <span class="stat-tout__number">
            2
            <span> out of</span>
            3
        </span>
        <div class="stat-tout__info-wrap">
            <span class="stat-tout__label">classes have less than 30 students</p></span>
        </div>
    </div>
</aside>

<!-- Statistic - two across -->
<h3>Statistic - two across</h3>
<div class="stat-set">
    <aside class="stat-wrapper clearfix">
        <div class="stat-tout">
            <span class="stat-tout__number">33%</span>
            <div class="stat-tout__info-wrap">
                <span class="stat-tout__label">of undergraduates are first-generation college students</span>
            </div>
        </div>
    </aside>

    <aside class="stat-wrapper clearfix">
        <div class="stat-tout">
            <span class="stat-tout__number">50%</span>
            <div class="stat-tout__info-wrap">
                <span class="stat-tout__label">of undergraduates receive need-based financial aid</span>
            </div>
        </div>
    </aside>
</div>

<!-- Statistic - three across -->
<h3>Statistic - three across</h3>
<div class="stat-set">
    <aside class="stat-wrapper">
        <div class="stat-tout">
            <span class="stat-tout__number">100+</span>
            <div class="stat-tout__info-wrap">
                <span class="stat-tout__label">museums</span>
            </div>
        </div>
    </aside>

    <aside class="stat-wrapper">
        <div class="stat-tout">
            <span class="stat-tout__number">200+</span>
            <div class="stat-tout__info-wrap">
                <span class="stat-tout__label">theaters</span>
            </div>
        </div>
    </aside>

    <aside class="stat-wrapper">
        <div class="stat-tout">
            <span class="stat-tout__number">8,000+</span>
            <div class="stat-tout__info-wrap">
                <span class="stat-tout__label">restaurants</span>
            </div>
        </div>
    </aside>
</div>