1
2
3
4
5
6
{
  "label": "Average GMAT Score",
  "value": 726,
  "label_element": "span",
  "value_element": "span"
}

1
2
3
4
<div class="m-statistic {{ class }}">
	<{{label_element|default("dt")}} class="m-statistic__label">{{ label }}</{{label_element|default("dt")}}>
	<{{value_element|default("dd")}} class="m-statistic__value" data-countup-item>{{ value }}</{{value_element|default("dd")}}>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.m-statistic {
  @include columns-container;
  flex-direction: row-reverse;

  @include breakpoint("medium+") {
    margin-left: 0;
    flex-direction: column-reverse;
  }

  &__value {
    display: block;
    @include f-display-3;
    @include spacing(
      (
        "xsmall": 4px,
        "medium+": 12px,
        "xlarge+": 0px
      )
    );
  }
  &__label {
    display: block;
    @include f-body-1;
    @include spacing(
      (
        "xsmall": 8px,
        "medium+": 16px
      )
    );
  }

  &__label,
  &__value {
    @include column(
      (
        xsmall: 3,
        small: 3
      )
    );
    @media print {
      width: 50%;
    }
  }
}