Key Info

Purpose

Key info presents the key information about an object or a page in an easy to scan way.

Example

keyinfo-small
keyinfo-large

Description

Every block in the key info module communicates a different piece of key information about the same subject, such as a course.

Example (below header on Course Description Page)

Elements

Module consists of multiple blocks, each containing:

Every block in this module communicates a different piece of key information about the same subject, such as a course.

Variants

Key info - No icons

This variant follows the same principle as the original key info module, however it doesn't include icons and uses a darker (gainsboro) background. Currently used on career advice pages.

keyinfo-careeradvice-small.png
keyinfo-careeradvice-large
Live example

Added by: