Skip to main

Design System

  • Welcome
  • Colors
  • Typography
  • Spacing

CSS

  • Utilities
  • Compositions

Component Library

  • Aside
  • Audio Player
  • Authors
  • Banners
  • Block quotes
  • Brand
  • Breadcrumbs
  • Browser compatibility table
  • Button
  • Callout
  • Cards
  • Carousel
  • Code blocks
  • Compare
  • Counter
  • Details
  • Eyebrow
  • Floating Action Button
  • Feature Card
  • Figure
  • Fixed width Image
  • Form Fields
  • Headline
  • Hero
  • Hero Image
  • Icon Button
  • Indicator
  • Labels
  • Lists
  • Numbered headers
  • Page Header
  • Pagination
  • Pill
  • Preview Pagination
  • Prose
  • Stack Nav
  • Stats
  • Status List
  • Tables
  • Tabs
  • Generated table of contents
  • Toggle Switch
  • Tooltips

Stats - Component

Alternative Look And Feel
View full screen
Code

Source (Nunjucks)

<ul class="stats {{ data.utilities }}">
{% for item in data.items %}
<div class="stats__item">
<p class="stats__figure">
{{ item.stat }}
{% if item.sub %}
<sub>{{ item.sub }}</sub>
{% endif %}
</p>
<p>{{ item.desc }}</p>
</div>
{% endfor %}
</ul>

Output

<ul class="stats">
<div class="stats__item">
<p class="stats__figure">
30
<sub>%</sub>
</p>
<p>Lower cost per conversion</p>
</div>
<div class="stats__item">
<p class="stats__figure">
13
<sub>%</sub>
</p>
<p>Higher CTR</p>
</div>
<div class="stats__item">
<p class="stats__figure">
4
<sub>x</sub>
</p>
<p>Faster load times</p>
</div>
</ul>

Information

Use the Stats component to call out important statistics about a product or service discussed in a post. (Stats are primarily used in case studies.)

You can modify the look and feel of stats by using utility classes that reference theme colors. It's recommended that you add these theme classes to the root, .stats element.

Key links

  • Sass File

Variants

Alternative Look And Feel

View full screen
Code

Source (Nunjucks)

<ul class="stats {{ data.utilities }}">
{% for item in data.items %}
<div class="stats__item">
<p class="stats__figure">
{{ item.stat }}
{% if item.sub %}
<sub>{{ item.sub }}</sub>
{% endif %}
</p>
<p>{{ item.desc }}</p>
</div>
{% endfor %}
</ul>

Output

<ul class="stats bg-state-info-bg color-state-info-text">
<div class="stats__item">
<p class="stats__figure">
30
<sub>%</sub>
</p>
<p>Lower cost per conversion</p>
</div>
<div class="stats__item">
<p class="stats__figure">
13
<sub>%</sub>
</p>
<p>Higher CTR</p>
</div>
<div class="stats__item">
<p class="stats__figure">
4
<sub>x</sub>
</p>
<p>Faster load times</p>
</div>
</ul>

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.