UCLA Web Components

Statistics, Rankings and Factoids

bitbucket Report an Issue Slack Join the Slack Discussion

Highlight an important fact, data point or ranking. We have a lot of useful data and information to share with the public, and accomplishments we can tout. Use these highly visual callouts to do it.

Usage

Usability Guidance

  • When using rankings or statistics touts, limit use to three across per section.
  • When using factoids, limit use to one per section.
  • All three variations are designed to be responsive – they will stack on mobile.
  • Use the stat-tout--inline variation class to horizontally align a number and label.
  • When grouping multiple touts across a section, wrap all stat touts in a <div class="stat-set"></div> container. This handles responsiveness and aligning the touts.
  • Provide a source if the data or ranking comes from another program or institution.

Accessibility Requirements

  • Use the <aside> element to denote factoids and statistics as standalone content.
  • Use CSS to style italicized copy, instead of using <em> or <i> HTML tags.

Factoid

Do’s and Don’ts

Do’s

  • Do use only one factoid per section of content.
  • Do include the stat-tout--inline variation class when using a factoid.

Don’ts

  • Don’t group more than one factoid together.

Code

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

Rankings

Do’s and Don’ts

Do’s

  • Do limit three rankings per section of content.
  • Do wrap multiple rankings in a <div class="stat-set"></div> container.
  • Do include a source if data or ranking comes from another program or institution.

Don’ts

  • Don’t group more than four rankings in a div.stat-set container.

Code

<!-- Ranking - single -->
<h3 class="mt-24">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 class="mt-24">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 class="mt-24">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 class="mt-24">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>

Statistics

Do’s and Don’ts

Do’s

  • Do limit three statistics per section of content.
  • Do wrap multiple statistics in a <div class="stat-set"></div> container.

Don’ts

  • Don’t group more than four statistics in a div.stat-set container.

Code

<!-- Statistic - single variable -->
<h3 class="mt-24">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 class="mt-24">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 class="mt-24">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</span>
    </div>
  </div>
</aside>

<!-- Statistic - two across -->
<h3 class="mt-24">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 class="mt-24">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>