Testimonials

Testimonial panels are used to present 'hero' quotes.

Best practice

Blocks or paragraphs of quotes should be wrapped in the 'blockquote' tag for screen readers (accessibility) to identify them as quotes.

Alternative UI components

Testimonial panel

Usage

Use a Testimonial panel when presenting a quote without an image of the quotee. The quote is usually one paragraph long of less than 100 words,

Definition

The Testimonial panel presents a quote without an image on a purple--100 background panel which stretches the full width of the content column. The panel has an ACU corner-cut on the bottom right.

Code samples

Desktop

Rectangular panel with $purple--100 background color
one to two quotes in paragraphs wrapped by the blockquote tag and in $purple--40 colour, in Miller text and font-size of 1.2rem
the hero's name or title in $white
the panel's bottom right corner is cut out at a 45 degree angle.

Forthcoming...

Example in action

Testimonial panel (Pair your course...)

Testimonial panel (image)

Usage

Use the Testimonial panel (image) to present an image of the quoted subject, 'hero', along with their quote. The quote should be one to two paragraphs (up to 100 words) long.

Definition

The Testimonial panel (image) presents an image of the quoted subject, 'hero', on the left along with their quote on a purple--100 background which slightly overlaps the subject's image. The panel has an ACU corner-cut on the bottom right.

Code samples

Desktop

a hero image (300px by 260) on the left
a rectangular panel on the right with $purple--100 background color
the panel overlaps the image's right side by a -4rem margin and down from the top of the image by a 3rem margin
one to two quoted paragraphs wrapped by the blockquote tag and in $purple--40 colour
the hero's name in $white followed by their title or other detail (e.g. course name)
the panel's bottom right corner is cut out at a 45 degree angle.

Mobile

Forthcoming...

Examples in action

Testimonial panel (image) (see 'Hannah Ragell')

Testimonial panel (image, long quote)

Usage

Use the Testimonial panel (image, long quote) to present an extended quote from them when the quote is more than two paragraphs long.

Definition

The Testimonial panel (image, long quote) presents an image of the quoted subject, 'hero', on the left, along with an extended quote from them in a larger Miller text font (1.3rem) with a large purple--100 background which slightly overlaps the subject's image. The panel has an ACU corner-cut on the bottom right.

Code samples

Desktop

a hero image (300px by 260) on the left
a rectangular panel on the right with $purple--100 background color
the panel overlaps the image's right side by a -4rem margin and down from the top of the image by a 3rem margin
one to two quoted paragraphs wrapped by the blockquote tag and in $purple--40 colour, in Miller text and font-size of 1.2rem
the hero's name in $white followed by their title or other detail (e.g. course name)
the panel's bottom right corner is cut out at a 45 degree angle.

Mobile

Forthcoming...

Example in action

Testimonial panel (image, long quote) (see 'Professor Dermot Nestor')