<!-- Ranges -->
<div class="Stats">
    <figure class="Stat">
        <p class="Stat-heading Heading Heading--medium">20,000,000+</p>
        <figcaption class="Stat-caption">Attend</figcaption>
    </figure>
    <figure class="Stat">
        <p class="Stat-heading Heading Heading--medium">65</p>
        <figcaption class="Stat-caption">Posts</figcaption>
    </figure>
    <figure class="Stat">
        <p class="Stat-heading Heading Heading--medium">20</p>
        <figcaption class="Stat-caption">Sharpies Lost on the Field of Battle</figcaption>
    </figure>
    <figure class="Stat">
        <p class="Stat-heading Heading Heading--medium">300,000,000,000</p>
        <figcaption class="Stat-caption">Sharpies Lost on the Field of Battle</figcaption>
    </figure>
</div>

<!-- Representative -->
<div class="Stats">
    <figure class="Stat">
        <p class="Stat-heading Heading Heading--medium">20,000+</p>
        <figcaption class="Stat-caption">Attendees</figcaption>
    </figure>
    <figure class="Stat">
        <p class="Stat-heading Heading Heading--medium">235</p>
        <figcaption class="Stat-caption">Speakers</figcaption>
    </figure>
    <figure class="Stat">
        <p class="Stat-heading Heading Heading--medium">65</p>
        <figcaption class="Stat-caption">Workshops run</figcaption>
    </figure>
    <figure class="Stat">
        <p class="Stat-heading Heading Heading--medium">300m</p>
        <figcaption class="Stat-caption">Post-its used</figcaption>
    </figure>
    <figure class="Stat">
        <p class="Stat-heading Heading Heading--medium">25bn</p>
        <figcaption class="Stat-caption">Sharpies lost</figcaption>
    </figure>
</div>

<div class="Stats">
    {% for stat in stats %}
    {% if stat.statValue is not empty %}
    {% include '@stat' with stat %}
    {% endif %}
    {% endfor %}
</div>
/* Ranges */
{
  "stats": [
    {
      "statValue": "20,000,000+",
      "statCaption": "Attend"
    },
    {
      "statValue": "65",
      "statCaption": "Posts"
    },
    {
      "statValue": "20",
      "statCaption": "Sharpies Lost on the Field of Battle"
    },
    {
      "statValue": "300,000,000,000",
      "statCaption": "Sharpies Lost on the Field of Battle"
    }
  ]
}

/* Representative */
{
  "stats": [
    {
      "statValue": "20,000+",
      "statCaption": "Attendees"
    },
    {
      "statValue": "235",
      "statCaption": "Speakers"
    },
    {
      "statValue": "65",
      "statCaption": "Workshops run"
    },
    {
      "statValue": "300m",
      "statCaption": "Post-its used"
    },
    {
      "statValue": "25bn",
      "statCaption": "Sharpies lost"
    }
  ]
}

Recommended max characters approximately 8

As you can see above, doesn’t wrap well on strings longer than that.

We could add word-wrap, but then it tends to break prematurely on the + on something like 20,000+. We could add manual hyphenation with soft hyphens to overcome that, but possibly more trouble than its worth in the CMS, and possibly tricky to explain to end users.