Testimonial

Purpose

The testimonial module is used to highlight a quote from a learner or external organisation.

Example

Testimonial Small
Testimonial Medium
Testimonial Large

Description

Learner testimonials are used on category pages and topic pages to lend credibility to our offering. We also have a legacy version still used on some course descriptions pages and on a few specialised landing pages (eg. Career Advice pages).

Elements

The module has the following fields:

Ideally, a testimonial uses an image. If the image supplied isn’t of reasonable quality, a pull quote can be used.

To keep our testimonials punchy, there is a character limit imposed on the quote (200 characters) and pull quote (70 characters).

Usually we would feature two testimonials, and on larger screens these would show side by side. We also have a version of the testimonial module for where there is only one testimonial to show.

Variants

One column testimonial

If we only have one testimonial to show, we use the one-column version (testimonial-container--one-column), which stretches to fit the container width of the page on larger screens.

Testimonial One Column

Legacy version

This legacy version is still used on some course description pages and career advice pages and is built using HAML rather than React. We should endeavour to roll out the new version imminently.

The module has the following fields:

  • quote (required)
  • source name (required)
  • source description
  • image URL
  • image alt text
  • source avatar image URL

The two required fields are a quote and the name of the person quoted. Optionally, a source description can be added: this is a small piece of supporting text to describe who the person quoted is

Testimonial Without Image
Live example

Legacy version with large image

A legacy testimonial may optionally have an image associated with it. This image is quite large compared to the quote text, which is why we’re moving towards using the new version.

Testimonial With Image
Live example

Legacy version with small Image

The `small-img` variant is available for partner logos, where a smaller, fixed size is needed.

Testimonial Small Img Small
Testimonial Small Img Medium
Live example

Added by: