<!-- Blue Icons -->
<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-image">
<img width="72" height="72" src="../../images/key-stats/lightbulb-green-blue.svg" alt="icon" />
</span>
<span class="key-stat-big-text">1000</span> <span class="key-stat-subtitle">Written explanation of key statistic</span> </div>
<div class="key-stat">
<span class="key-stat-image">
<img width="72" height="72" src="../../images/key-stats/lightbulb-green-blue.svg" alt="icon" />
</span>
<span class="key-stat-big-text">2</span> <span class="key-stat-subtitle">new cures for this problem found</span> </div>
<div class="key-stat">
<span class="key-stat-image">
<img width="72" height="72" src="../../images/key-stats/lightbulb-green-blue.svg" alt="icon" />
</span>
<span class="key-stat-big-text">300</span> <span class="key-stat-subtitle">users were interviewed for positive results</span> </div>
</section>
</section>
<!-- Red Icons -->
<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-image">
<img width="72" height="72" src="../../images/key-stats/lightbulb-strawberry.svg" alt="icon" />
</span>
<span class="key-stat-big-text">88</span> <span class="key-stat-subtitle">Written explanation of key statistic</span> </div>
<div class="key-stat">
<span class="key-stat-image">
<img width="72" height="72" src="../../images/key-stats/lightbulb-strawberry.svg" alt="icon" />
</span>
<span class="key-stat-big-text">2<sup>%</span> <span class="key-stat-subtitle">new cures for this problem example of really small print note added*</span> <span class="key-stat-footnote">*sample of study was 100 people</span> </div>
</section>
</section>
<!-- Percentages -->
<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>
<!-- Number Variants -->
<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>%</span> <span class="key-stat-subtitle">Written explanation of key statistic underneath the number goes here</span> </div>
<div class="key-stat">
<span class="key-stat-big-text">10<small>x</small></span> <span class="key-stat-subtitle">the amount of sign ups than before launch</span> </div>
<div class="key-stat">
<span class="key-stat-big-text">3<sub> in </sub>4</span> <span class="key-stat-subtitle">students are employed within 6 months of course completion</span> </div>
</section>
</section>
<!-- Single Stat -->
<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">99<sup>%</span> <span class="key-stat-subtitle">Written explanation of key statistic underneath the number goes here</span> </div>
</section>
</section>
<!-- Icons -->
<section class="key-stats">
<section class="text-block" role="region" aria-labelledby="custom-icons">
<h2 id="custom-icons">Custom icons</h2>
<p>Any icon available in the web font is available to use as an icon, a limited palette of colours can be applied to those icons, or an SVG or PNG image file can be used as an icon.</p>
</section>
<section class="key-stats-container">
<div class="key-stat">
<span class="key-stat-icon">
<i class="uod-icons uod-icons-facebook"></i>
</span>
<span class="key-stat-big-text">6<sub>M</sub></span> <span class="key-stat-subtitle">a default icon colour is text-black (#333333)</span> </div>
<div class="key-stat">
<span class="key-stat-icon key-stat-icon-orange">
<i class="uod-icons uod-icons-pinterest"></i>
</span>
<span class="key-stat-big-text">70<sup>%</span> <span class="key-stat-subtitle">apply an icon_colour to change the colour</span> </div>
<div class="key-stat">
<span class="key-stat-image">
<img width="72" height="72" src="../../images/key-stats/instagram-logo.png" alt="icon" />
</span>
<span class="key-stat-big-text">12<sup>%<sup></span> <span class="key-stat-subtitle">use an image element if you need something custom</span> </div>
</section>
</section>
<!-- Formatting -->
<section class="key-stats">
<section class="text-block" role="region" aria-labelledby="text-formatting">
<h2 id="text-formatting">Text formatting</h2>
<p>Additional markup can be applied to improve the appearance of statistic, but it has to be applied on an individual basis to each item, to give maximum flexibility.</p>
</section>
<section class="key-stats-container">
<div class="key-stat">
<span class="key-stat-big-text">10,000</span> <span class="key-stat-subtitle">any text is large by default</span> </div>
<div class="key-stat">
<span class="key-stat-big-text">10<sub>k</sub></span> <span class="key-stat-subtitle">use <sub> tags to make numbers small</span> </div>
<div class="key-stat">
<span class="key-stat-big-text">3<small> in</small>10</span> <span class="key-stat-subtitle">use <small> tags to make words smaller</span> </div>
<div class="key-stat">
<span class="key-stat-big-text">1<sup>%</sup></span> <span class="key-stat-subtitle">use <sup> tags to pull characters to the top of the text</span> </div>
<div class="key-stat">
<span class="key-stat-big-text">X <small>X</small> <sub>X</sub> <sup>X</sup></span> <span class="key-stat-subtitle">default, small, subscript, superscript</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.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>
/* Blue Icons */
{
"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": [
{
"image_path": "/images/key-stats/lightbulb-green-blue.svg",
"stats_text": "1000",
"subtitle": "Written explanation of key statistic"
},
{
"image_path": "/images/key-stats/lightbulb-green-blue.svg",
"stats_text": "2",
"subtitle": "new cures for this problem found"
},
{
"image_path": "/images/key-stats/lightbulb-green-blue.svg",
"stats_text": "300",
"subtitle": "users were interviewed for positive results"
}
]
}
/* Red Icons */
{
"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": [
{
"image_path": "/images/key-stats/lightbulb-strawberry.svg",
"stats_text": "88",
"subtitle": "Written explanation of key statistic"
},
{
"image_path": "/images/key-stats/lightbulb-strawberry.svg",
"stats_text": "2<sup>%",
"subtitle": "new cures for this problem example of really small print note added*",
"footnote": "*sample of study was 100 people"
}
]
}
/* Percentages */
{
"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"
}
]
}
/* Number Variants */
{
"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>%",
"subtitle": "Written explanation of key statistic underneath the number goes here"
},
{
"stats_text": "10<small>x</small>",
"subtitle": "the amount of sign ups than before launch"
},
{
"stats_text": "3<sub> in </sub>4",
"subtitle": "students are employed within 6 months of course completion"
}
]
}
/* Single Stat */
{
"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": "99<sup>%",
"subtitle": "Written explanation of key statistic underneath the number goes here"
}
]
}
/* Icons */
{
"title": "Custom icons",
"content": "<p>Any icon available in the web font is available to use as an icon, a limited palette of colours can be applied to those icons, or an SVG or PNG image file can be used as an icon.</p>",
"stats": [
{
"icon": "facebook",
"stats_text": "6<sub>M</sub>",
"subtitle": "a default icon colour is text-black (#333333)"
},
{
"icon": "pinterest",
"icon_colour": "orange",
"stats_text": "70<sup>%",
"subtitle": "apply an icon_colour to change the colour"
},
{
"image_path": "/images/key-stats/instagram-logo.png",
"stats_text": "12<sup>%<sup>",
"subtitle": "use an image element if you need something custom"
}
]
}
/* Formatting */
{
"title": "Text formatting",
"content": "<p>Additional markup can be applied to improve the appearance of statistic, but it has to be applied on an individual basis to each item, to give maximum flexibility.</p>",
"stats": [
{
"stats_text": "10,000",
"subtitle": "any text is large by default"
},
{
"stats_text": "10<sub>k</sub>",
"subtitle": "use <sub> tags to make numbers small"
},
{
"stats_text": "3<small> in</small>10",
"subtitle": "use <small> tags to make words smaller"
},
{
"stats_text": "1<sup>%</sup>",
"subtitle": "use <sup> tags to pull characters to the top of the text"
},
{
"stats_text": "X <small>X</small> <sub>X</sub> <sup>X</sup>",
"subtitle": "default, small, subscript, superscript"
}
]
}
$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: 11/16;
}
}
.text-block {
margin-bottom: px-to-em(100);
}
}
.key-stat {
lost-offset: 1/8;
lost-column: 6/8;
margin-bottom: 40px;
border-bottom: 1px dashed $dark-grey;
padding: $margin-extra-small px-to-em(8);
text-align: center;
&: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;
}
}
}
}
&-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.