Stats - Component

Render: {{ design.components.render('stats') | safe }}
View full screen
Code

Source (Nunjucks)

<ul class="stats auto-grid {{ data.utilities }}">
  {% for item in data.items %}
  <div class="stats__item flow">
    <p class="font-brand text-size-6">
      {{ item.stat }}
      {% if item.sub %}
      <sub>{{ item.sub }}</sub>
      {% endif %}
    </p>
    <p>{{ item.desc }}</p>
  </div>
  {% endfor %}
</ul>

Output

<ul class="stats auto-grid bg-state-good-bg color-state-good-text">
  <div class="stats__item flow">
    <p class="font-brand text-size-6">
      30
      <sub>%</sub>
    </p>
    <p>Lower cost per conversion</p>
  </div>
  <div class="stats__item flow">
    <p class="font-brand text-size-6">
      13
      <sub>%</sub>
    </p>
    <p>Higher CTR</p>
  </div>
  <div class="stats__item flow">
    <p class="font-brand text-size-6">
      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

Render: {{ design.components.render('stats-alternative-look-and-feel') | safe }}
View full screen
Code

Source (Nunjucks)

<ul class="stats auto-grid {{ data.utilities }}">
  {% for item in data.items %}
  <div class="stats__item flow">
    <p class="font-brand text-size-6">
      {{ item.stat }}
      {% if item.sub %}
      <sub>{{ item.sub }}</sub>
      {% endif %}
    </p>
    <p>{{ item.desc }}</p>
  </div>
  {% endfor %}
</ul>

Output

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