<div class="{{ component.css_classes.stat }}">
  {% if component.href %}<a href="{{ component.href }}">{% endif %}
  {% if component.icon %}
  <div class="{{ component.css_classes.icon }}">
    {{ component.icon|safe }}
  </div>
  {% endif %}
  <h2 class="{{ component.css_classes.heading }}">{{ rendered_value.text }}</h2>
  <p class="{{ component.css_classes.text }}">
    {% if rendered_value.change_by_display %}
    <span class="text-{% if rendered_value.change_by > 0 %}success{% else %}danger{% endif %}">
    {% if rendered_value.change_by > 0 %}
      &uarr;
      {% else %}
      &darr;
      {% endif %} {{ rendered_value.change_by_display }}
    </span>
    {% endif %}
    <span>{{ rendered_value.sub_text }}</span>
  </p>
  {% if component.href %}</a>{% endif %}
</div>