UCLA Component Library

Statistic Touts 

<!-- Factoid - single -->
<!-- use case: longer sentences -->
<h3>Factoid - single</h3>

<aside class="stat-wrapper clearfix">
    <div class="stat-tout stat-tout--inline">
        <div class="stat-tout__info-wrap">
            <span class="stat-tout__label">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </span>
        </div>
    </div>
</aside>

<!-- Ranking - single -->
<h3>Ranking - single</h3>
<aside class="stat-wrapper clearfix">
    <div class="stat-tout">
        <span class="stat-tout__number">#9</span>
        <div class="stat-tout__info-wrap">
            <span class="stat-tout__label">in the world for mathematics</span>
            <span class="stat-tout__source">Academic Ranking of World Universities (2019)</span>
        </div>
    </div>
</aside>

<!-- Ranking - single, inline -->
<h3>Ranking - single, inline</h3>
<aside class="stat-wrapper clearfix">
    <div class="stat-tout stat-tout--inline">
        <span class="stat-tout__number">#9</span>
        <div class="stat-tout__info-wrap">
            <span class="stat-tout__label">in the world for mathematics</span>
            <span class="stat-tout__source">Academic Ranking of World Universities (2019)</span>
        </div>
    </div>
</aside>

<!-- Rankings - two across  -->
<h3>Rankings - two across</h3>
<div class="stat-set">
    <aside class="stat-wrapper clearfix">
        <div class="stat-tout stat-tout--inline">
            <span class="stat-tout__number">#9</span>
            <div class="stat-tout__info-wrap">
                <span class="stat-tout__label">in the world for mathematics</span>
                <span class="stat-tout__source">Academic Ranking of World Universities (2019)</span>
            </div>
        </div>
    </aside>

    <aside class="stat-wrapper clearfix">
        <div class="stat-tout stat-tout--inline">
            <span class="stat-tout__number">#4</span>
            <div class="stat-tout__info-wrap">
                <span class="stat-tout__label">Best Value Colleges</span>
                <span class="stat-tout__source">Forbes (2019)</span>
            </div>
        </div>
    </aside>
</div>

<!-- Rankings - three across -->
<!-- Caveats: avoid using stat-tout inline modifier  -->
<h3>Rankings - three across</h3>
<div class="stat-set">
    <aside class="stat-wrapper clearfix">
        <div class="stat-tout">
            <span class="stat-tout__number">#6</span>
            <div class="stat-tout__info-wrap">
                <span class="stat-tout__label">nationally for English</span>
                <span class="stat-tout__source">U.S. News &amp; World Report (2018)</span>
            </div>
        </div>
    </aside>

    <aside class="stat-wrapper clearfix">
        <div class="stat-tout">
            <span class="stat-tout__number">#12</span>
            <div class="stat-tout__info-wrap">
                <span class="stat-tout__label">Best Global Universities rankings for world arts and humanities</span>
                <span class="stat-tout__source">U.S. News & World Report (2019)</span>
            </div>
        </div>
    </aside>

    <aside class="stat-wrapper clearfix">
        <div class="stat-tout">
            <span class="stat-tout__number">#3</span>
            <div class="stat-tout__info-wrap">
                <span class="stat-tout__label">best film school</span>
                <span class="stat-tout__source">Hollywood Reporter (2019)</span>
            </div>
        </div>
    </aside>
</div>

<!-- 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>