Key stat

The key stat component provides a visual solution to displaying key data or numerical information. Where possible, key data should be displayed using this to break up long body’s of text and add visual interest to the page. An example use would be within a research case study.

If suitable icons for each stat is available, then the use of these is encouraged to lift heavy pages of body copy. Within one set of key stats, the stat display should be consistent. This means that they should either all have an icon, or all be numeric only.

In most cases, the icons should always use one of the core brand colour themes, and should be the same colour within each key stat set. Research case studies work best if a single colour theme is chosen to run through the whole page for consistency. Where possible, the icons should follow the brand line style. There may be rare instances where full colour is required for these icons, such as flags.

Explainer copy should be kept to a minimum on key stats, as this component is designed to stand out and be easy digestible.

Examples:

See key stat examples and set up information

Key features

• Optional title and intro, this should only be used on the first item in a group of statistics
• Consecutive key stat items will automatically be wrapped into a group
• If requiring multiple groups of statistics in a section separate by using the title or intro element or a different content type
• An icon/image can be added to a stat if required
  • There is a preset list of icons which can be used
  • All icons/images used in a section should be the same colour unless colour is required to give context
  • For preset icons the colour is set using the Pattern colour element on the Section config content type
  • Custom svg files be uploaded to the image field which can be used as an icon, however these must requested through the University's in house Design Team
• In specific circumstances the image stat field can be used to add an image to represent the stat eg TEF Gold

For further implementation information please see the examples below.

Examples

• Examples