University of Derby

Key Stats 

<!-- 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 &lt;sub&gt; 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 &lt;small&gt; 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 &lt;sup&gt; 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>


<!-- Alt Images -->
<section class="key-stats">
    <section class="text-block" role="region" aria-labelledby="using-an-image-as-the-stat">
        <h2 id="using-an-image-as-the-stat">Using an image as the stat</h2>
        <p>In some instances it may be appropriate for an image to be used to represent a stat. This <strong>must</strong> only be used in cases where a logo or badge represents an award or achievement, for example TEF Gold.</p>
    </section>
    <section class="key-stats-container">
        <div class="key-stat">
            <span class="key-stat-image-stat">
                    <img src="../../images/logo-group/TEF-Gold-logo-RGB.jpg" alt="TEF Gold logo" />
                </span>
            <span class="key-stat-subtitle">We're rated Gold in the Teaching Excellence Framework (TEF)</span> </div>
        <div class="key-stat">
            <span class="key-stat-big-text"><sub>Top</sub>30</span> <span class="key-stat-subtitle">UK University*</span> <span class="key-stat-footnote">*Guardian University Guide 2020</span> </div>
        <div class="key-stat">
            <span class="key-stat-big-text"><sub>Top</sub>10</span> <span class="key-stat-subtitle">in the world for international student learning experience*</span> <span class="key-stat-footnote">*Global ISB Benchmark Group 2018</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>
 
/* 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 &lt;sub&gt; tags to make numbers small"
    },
    {
      "stats_text": "3<small> in</small>10",
      "subtitle": "use &lt;small&gt; tags to make words smaller"
    },
    {
      "stats_text": "1<sup>%</sup>",
      "subtitle": "use &lt;sup&gt; 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"
    }
  ]
}


/* Alt Images */
{
  "title": "Using an image as the stat",
  "content": "<p>In some instances it may be appropriate for an image to be used to represent a stat. This <strong>must</strong> only be used in cases where a logo or badge represents an award or achievement, for example TEF Gold.</p>",
  "stats": [
    {
      "image_stat": {
        "image_path": "/images/logo-group/TEF-Gold-logo-RGB.jpg",
        "image_alt": "TEF Gold logo"
      },
      "subtitle": "We're rated Gold in the Teaching Excellence Framework (TEF)"
    },
    {
      "stats_text": "<sub>Top</sub>30",
      "subtitle": "UK University*",
      "footnote": "*Guardian University Guide 2020"
    },
    {
      "stats_text": "<sub>Top</sub>10",
      "subtitle": "in the world for international student learning experience*",
      "footnote": "*Global ISB Benchmark Group 2018"
    }
  ]
}
  • Content: 
    $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);
        }
    }
}
  • URL: /components/raw/key-stats/key-stats.scss
  • Filesystem Path: components/components/key-stats/key-stats.scss
  • Size: 3.5 KB

Key Stats

Highlights individual or multiple numerical statistics with support for explanatory text and/or icons, and an accompanying title and description paragraph.

Key Features

  • Optional heading
  • Optional paragraph of text
  • Large statistics with text, icons, images and subtitle support
  • Supports any number of stats, grouped into three columns.

Properties

  • title [optional, string]
  • content [optional, string, html]
  • stats [required, Array of Stat objects]

Stat

  • stats_text [required, string]
  • subtitle [optional, string]
  • footnote [optional, string]
  • image_path [optional, string(path)]
  • icon [optional, string]
  • icon_colour [optional, string of “primary-blue”, “strawberry”, “mid-blue”, “light-grey”, “orange”, “turquoise”, “green”, “yellow” or “green-blue”]
  • image_stat [optional, Image Object]

Image

  • image_path [required, string(path)]
  • image_alt [required, string]