Testimonial Block Component

The Testimonial component allows for the easy and attractive display of short user quotes with a variety of configuration options.

Testimonials can be displayed individually or shown as a carousel. Images are optional but recommended for the best display. Each testimonial can be hyperlinked.

When to use the Testimonial component

A testimonial consists of a person's written or spoken statement praising the virtue of an experience. Use this component to create a strong visual indicator for the display of short testimonial quotes with an optional image. Adding multiple testimonials to the same component will enable a sliding carousel.

Style Options

Style 1:

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Sample Student
Sample Student
Citation Title

Style 2:

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Sample Student
Sample Student
Citation Title

Style 3:

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Sample Student
Sample Student
Citation Title

Style 3a:

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Sample Student
Sample Student
Citation Title

Style 4:

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Sample Student
Sample Student
Citation Title

Note: Styles 3 and 4 will appear the same on mobile devices.


Color Options

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
老司机福利社 Gold
One Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
老司机福利社 Blue
One Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
Neutral Gray
One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
老司机福利社 Gold
One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
老司机福利社 Blue
One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Neutral Gray

Carousel Options

Carousel functionality is automatically enabled when multiple testimonials have been entered into the same component.

Slide indicator arrows and dots can be disabled. Automatic advancement of the carousel can be enabled.

Slide order can be manually assigned but will display in the order they were created by default.

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Sample Student 1
Sample Student 1
Citation Title
One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Sample Student 2
Sample Student 2
Citation Title

Show two slides side by side:

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Sample Student 1
Sample Student 1
Citation Title
One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Sample Student 2
Sample Student 2
Citation Title
One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Sample Student 3
Sample Student 3
Citation Title

Usage Guidance

Testimonial content of no more than 100 words is recommended. An option to link the testimonial block is available if more content is required.  

Citation images are optional but need to be at least 200 x 200 pixels. An image aspect ratio of 1 x 1 (perfect square) is recommended for best display.

More than one testimonial carousel per page is not recommended.

Implementation

  1. Open a page in Modern Campus CMS and enter editing mode.
  2. Place your cursor where you would like to place an image.
  3. From the toolbar, select the component icon  Snippet icon , which resembles an atom symbol.
  4. From the list of components, select the Testimonial component.
  5. Fill in the required fields and select your options.
  6. To create a carousel of testimonials, click the "Add New Group" button within the component. Two or more testimonial groups are required to enable the carousel.
  7. Save and preview.