University of Derby

Key Stats: 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>
 
<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>
 
{
  "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"
    }
  ]
}
  • 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: 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);
        }
    }
}
  • URL: /components/raw/key-stats/key-stats.scss
  • Filesystem Path: components/components/key-stats/key-stats.scss
  • Size: 3.3 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”]