Pattern library

Stats

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.)

Include no more than four statistics in a single Stats component to avoid layout issues.

View full screen

Details

Source (Nunjucks)

<div class="w-stats">
{% for item in data.items %}
<div class="w-stat">
<p class="w-stat__figure">
{{ item.stat }}
{% if item.sub %}
<sub class="w-stat__sub">{{ item.sub }}</sub>
{% endif %}
</p>
<p class="w-stat__desc">{{ item.desc }}</p>
</div>
{% endfor %}
</div>

Output

<div class="w-stats">

<div class="w-stat">
<p class="w-stat__figure">
30

<sub class="w-stat__sub">%</sub>

</p>
<p class="w-stat__desc">Lower cost per conversion</p>
</div>

<div class="w-stat">
<p class="w-stat__figure">
13

<sub class="w-stat__sub">%</sub>

</p>
<p class="w-stat__desc">Higher CTR</p>
</div>

<div class="w-stat">
<p class="w-stat__figure">
4

<sub class="w-stat__sub">x</sub>

</p>
<p class="w-stat__desc">Faster load times</p>
</div>

</div>