SIA Web Design Library

Stat: Small

No notes defined.

<figure class='c-stat c-stat--small '>
    <span class='c-stat__text'>
        <figcaption class='c-stat__caption'>
            <strong class='c-stat__highlight'>Focus on Impact</strong>
        </figcaption>
        <span class='c-stat__figure'><span class='c-stat__number'>91%</span> <span class='c-stat__progress-bar' style='width: 91%;'></span></span>
        <span class='c-stat__detail'>of participants in 2019 aim at helping as many individuals as possible, even if it costs them time and energy.</span>
    </span>
</figure>
 
<figure class='{{ get_component_class( 'stat', display ) }} {% if icon %} c-stat--with-icon {% endif %}'>
    {% if icon %}
        {% include '@unit/icon/icon.twig' with icon|merge( { display: { component: 'stat', modifiers: [ 'double' ] } } ) %}
    {% endif %}
    <span class='c-stat__text'>
        {% if detail %}
            <figcaption class='c-stat__caption'>
                <strong class='c-stat__highlight'>{{ caption | raw }}</strong>
            </figcaption>
        {% endif %}
        <span class='c-stat__figure' {% if floating %} style='padding-left: {{ figure }}%;'{% endif %}><span class='c-stat__number'>{{ figure }}{{ suffix }}</span> {% if suffix == "%" %} <span class='c-stat__progress-bar' style='width: {{ figure }}%;'></span>{% endif %}</span>
        {% if not detail %}
            <figcaption class='c-stat__caption'>
                <strong class='c-stat__highlight'>{{ caption | raw }}</strong>
            </figcaption>
        {% else %}
            {% if detail %}
                <span class='c-stat__detail'>{{ detail | raw }}</span>
            {% endif %}
        {% endif %}
    </span>
</figure>
 
{
  "figure": 91,
  "suffix": "%",
  "caption": "Focus on Impact",
  "detail": "of participants in 2019 aim at helping as many individuals as possible, even if it costs them time and energy.",
  "theme": "community",
  "display": {
    "modifiers": [
      "small"
    ]
  }
}