The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

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.

Testimonial panel

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...

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.

Testimonial panel (image)

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...

Forthcoming...

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.

Testimonial panel (image, long quote)

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...

Forthcoming...

Forthcoming...

Example in action

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