<section class="key-stats">
<section class="text-block" role="region" aria-labelledby="research-description">
<h2 id="research-description">Research description</h2>
<p>The pathways have been used to develop an indicator that measures how connected to nature a person is. It’s hoped that this indicator will be adopted by national policy makers as a way of measuring the effects of interventions. The University
led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>
<p>The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>
</section>
<section class="key-stats-container">
<div class="key-stat">
<span class="key-stat-big-text">10<sup>%</sup></span> <span class="key-stat-subtitle">Written explanation of key statistic</span> </div>
<div class="key-stat">
<span class="key-stat-big-text">300<sup>%</span> <span class="key-stat-subtitle">new cures for this problem found</span> </div>
<div class="key-stat">
<span class="key-stat-big-text">300</span> <span class="key-stat-subtitle">users were interviewed for positive results</span> </div>
</section>
</section>
<section class="key-stats">
{% if ( title or content ) %}
{% include '@text-block' with {
title: title,
content: content
} %}
{% endif %}
<section class="key-stats-container">
{% for stat in stats %}
<div class="key-stat">
{% if stat.icon %}
<span class="key-stat-icon{% if stat.icon_colour %} key-stat-icon-{{ stat.icon_colour }}{% endif %}">
<i class="uod-icons uod-icons-{{ stat.icon }}"></i>
</span>
{% endif %}
{% if stat.image_path %}
<span class="key-stat-image{% if stat.icon_colour %} key-stat-image-{{ stat.icon_colour }}{% endif %}">
<img width="72" height="72" src="{{ stat.image_path | path }}" alt="icon" />
</span>
{% endif %}
{% if stat.image_stat %}
<span class="key-stat-image-stat">
<img src="{{ stat.image_stat.image_path | path }}" alt="{{ stat.image_stat.image_alt }}" />
</span>
{% endif %}
{% if stat.stats_text %}<span class="key-stat-big-text">{{ stat.stats_text }}</span>{% endif %}
{% if stat.subtitle %}<span class="key-stat-subtitle">{{ stat.subtitle }}</span>{% endif %}
{% if stat.footnote %}<span class="key-stat-footnote">{{ stat.footnote }}</span>{% endif %}
</div>
{% endfor %}
</section>
</section>
{
"title": "Research description",
"content": "<p>The pathways have been used to develop an indicator that measures how connected to nature a person is. It’s hoped that this indicator will be adopted by national policy makers as a way of measuring the effects of interventions. The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p><p>The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>",
"stats": [
{
"stats_text": "10<sup>%</sup>",
"subtitle": "Written explanation of key statistic"
},
{
"stats_text": "300<sup>%",
"subtitle": "new cures for this problem found"
},
{
"stats_text": "300",
"subtitle": "users were interviewed for positive results"
}
]
}
$icon-colours: (
primary-blue: #101d49,
strawberry: #ee313e,
mid-blue: #2041cb,
light-grey: #eeeeee,
orange: #f85220,
turquoise: #018f99,
green: #37d68e,
yellow: #febf13,
green-blue: #37ddd1
);
.key-stats {
&-container {
lost-flex-container: row;
lost-column: 8/8;
margin-bottom: 40px;
justify-content: center;
@include for-largerthan-ipad-portrait {
lost-offset: 1/16;
lost-column: 14/16;
}
@include for-desktop-up {
lost-offset: 3/16;
lost-column: 10/16;
}
}
.text-block + .key-stats-container {
@include margin-medium-offset;
@include for-tablet-portrait-up {
@include margin-large-offset;
}
}
}
.key-stat {
lost-column: 6/8 0;
margin-bottom: 40px;
border-bottom: 1px dashed $dark-grey;
padding: $margin-extra-small px-to-em(8);
text-align: center;
margin-right: 0 !important;
&:last-child {
border-bottom: 0;
}
@include for-tablet-portrait-up {
lost-offset: 0;
lost-column: 4/12;
margin-right: 0 !important;
border-right: 1px dashed $dark-grey;
border-bottom: 0;
padding: px-to-em(8) $margin-small;
&:last-child {
border-right: 0;
}
&:nth-child(3n) {
border-right: 0;
padding-right: 0;
}
&:first-child {
padding-left: 0;
}
}
&-icon {
i {
margin-bottom: px-to-em(20, 72);
line-height: 1;
font-size: px-to-em(72);
}
@each $item, $colour in $icon-colours {
&.key-stat-icon-#{$item} {
color: $colour;
}
}
}
&-image {
height: 72px;
line-height: 1;
margin-bottom: px-to-em(20);
@each $item, $colour in $icon-colours {
&.key-stat-image-#{$item} {
color: $colour;
img path {
fill: $colour;
}
}
}
}
&-image-stat {
display: block;
margin-bottom: 10px;
> img {
max-width: 100%;
}
}
&-icon,
&-image,
&-big-text,
&-subtitle,
&-footnote {
display: block;
}
&-subtitle {
line-height: #{(20/18) + 0};
color: $primary-blue;
font-family: $large-body-font;
font-size: 18px;
font-weight: bold;
}
&-footnote {
@include small-body-font;
margin-top: $margin-extra-small;
line-height: #{(19/14) + 0};
}
&-big-text {
margin-bottom: px-to-em(16, 90);
line-height: #{(64/90) + 0};
color: $primary-blue;
font-family: $large-body-font;
font-size: responsive 70px 90px;
font-range: 768px 1024px;
font-weight: bold;
letter-spacing: px-to-em(-2, 90);
sup {
top: -27px;
font-size: 50px;
@include responsive('top', -21px, -27px, 768px, 1024px);
@include responsive('font-size', 38px, 50px, 768px, 1024px);
}
sub {
bottom: 0;
font-size: 40px;
@include responsive('font-size', 31px, 50px, 768px, 1024px);
}
small {
font-size: 50px;
@include responsive('font-size', 38px, 50px, 768px, 1024px);
}
}
}
Highlights individual or multiple numerical statistics with support for explanatory text and/or icons, and an accompanying title and description paragraph.