Stats - Component

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

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>