Testimonial Vertical Carousel - Flip Image
A vertical testimonial carousel that displays a card with an image that can be flipped for a text testimonial.
How to use
Each Testimonial Vertical Carousel - Flip Image is a separate piece of content. Adjacent Testimonial Vertical Carousel - Flip Image and Testimonial Vertical Carousel - Video content items are wrapped together to create a Testimonial Vertical Carousel. Recommend to add a minimum of 2 Testimonial Vertical Carousel content items in a carousel, there is no maximum number.
For the first Testimonial Vertical Carousel item in a group:
- Add a Title, this is displayed behind the carousel items
- Choose a Background Colour Purple, Teal or Teal Tint
- Optionally add Quick-Nav Text to be picked up the Quick Navigation Bar/Progress Navigation Bar
For each Vertical Carousel - Flip Image:
- By default a button to allow a user to flip the card to reveal additional content it shown, check the Hide Flip Button element to hide the button
- Select a suitable image from the Media Library for the Front Image.
Recommend image is at least 820px x1190px. The image can be any size or aspect ratio, and will be cropped and resized to 820px x1190px automatically by a service called PXL. Find out how PXL crop and resize works. - Optionally add a Testimonial Name, this is shown on the front of the card
- Optionally add a Summary, this is shown on the front of the card
- If the Hide Flip Button element is unchecked add the following which is shown on the reverse of the card:
- Add Testimonial text
- Optionally add 1-2 Links. For each Link add Link - Text for the button text and either select a section or content item for the Link - Internal Link (ignore the Use default link text checkbox), or paste the full URL for the Link - External URL (please do not enter both)
Content Type Details
ID: 450
Name: Testimonial Vertical carousel - Flip Image
Description: A vertical testimonial carousel that displays a card with an image that can be flipped for a text testimonial. Can be stacked and combined with ‘Testimonial Vertical carousel - Video’
Minimum user level: Contributor
Content Type Elements Details
| Name | Description | Size | Type | Required |
|---|---|---|---|---|
| Name | Name | 50 Characters | Plain Text | Yes |
| Title | Add a title on the first item in a carousel | 12 Characters | Plain Text | No |
| Background Colour | Set the background colour on the first item in a carousel | N/A | Select Box (List: Testimonial Vertical Carousel Background Colour) | No |
| Quick-Nav Text | This text will be used for the Quick Navigation Bar/Progress Navigation on the first item in a carousel | 20 Characters | Plain Text | No |
| Hide Flip Button | By default a button to flip the card is shown, check to hide the button | N/A | Check Box (List: Yes - Unchecked) | No |
| Front Image | The larger image on the front of the card | N/A | Media | Yes |
| Back Image | Smaller image shown when flipping the card for the text testimonial | N/A | Media | No |
| Testimonial Name | Add a name to the testimonial | 50 Characters | Plain Text | No |
| Summary | Brief text shown on the main card | 50 Characters | Plain Text | No |
| Testimonial text | The testimonial text shown on the flipped card | 500 Characters | Plain Text | No |
| Link 1 - Text | Text for the 1st link | 50 Characters | Plain Text | No |
| Link 1 - Internal Link | Link to an internal Section/Content | N/A | Section/Content Link | No |
| Link 1 - External URL | Link to an external URL | 250 Characters | Plain Text | No |
| Link 2 - Text | Text for the 2nd link | 50 Characters | Plain Text | No |
| Link 2 - Internal Link | Link to an internal Section/Content | N/A | Section/Content Link | No |
| Link 2 - External URL | Link to an external URL | 250 Characters | Plain Text | No |
Examples
Teal, Flip Image Cards
/8x0:1612x2328/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/scroll-card-ph-2.c4d25f32.jpg)
/filters:format(webp)/0x354:1620x1974/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/scroll-card-ph-2.c4d25f32.jpg)
“Having had experience in the dance industry prior to coming to Middlesex University, the course was able to further my dance knowledge and skills a great deal. It gave me all the necessary tools to become stronger and more physically able”
/4x0:806x1164/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/scroll-card-ph-4.6f85a3af.jpg)
Rachel Brooks
What makes the Middlesex so good
/filters:format(webp)/0x177:810x987/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/scroll-card-ph-4.6f85a3af.jpg)
“Having had experience in the dance industry prior to coming to Middlesex University, the course was able to further my dance knowledge and skills a great deal. It gave me all the necessary tools to become stronger and more physically able”
/8x0:1612x2328/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/scroll-card-ph-3.5cdf7ea3.jpg)
What makes the Middlesex so good
/filters:format(webp)/0x354:1620x1974/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/scroll-card-ph-3.5cdf7ea3.jpg)
“Having had experience in the dance industry prior to coming to Middlesex University, the course was able to further my dance knowledge and skills a great deal. It gave me all the necessary tools to become stronger and more physically able”
/0x46:1856x2739/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/scroll-card-ph-1.f70878e4.jpg)
/filters:format(webp)/0x464:1856x2320/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/scroll-card-ph-1.f70878e4.jpg)
“Having had experience in the dance industry prior to coming to Middlesex University, the course was able to further my dance knowledge and skills a great deal. It gave me all the necessary tools to become stronger and more physically able”
Purple, Video and Flip Image Cards
“Having had experience in the dance industry prior to coming to Middlesex University, the course was able to further my dance knowledge and skills a great deal. It gave me all the necessary tools to become stronger and more physically able”
Matthew Carter
Why I chose to study Law at MDX
Rachel Brooks
What makes the Middlesex so good
“Having had experience in the dance industry prior to coming to Middlesex University, the course was able to further my dance knowledge and skills a great deal. It gave me all the necessary tools to become stronger and more physically able”
“Having had experience in the dance industry prior to coming to Middlesex University, the course was able to further my dance knowledge and skills a great deal. It gave me all the necessary tools to become stronger and more physically able”
Teal Tint, Flip Image Cards
“Having had experience in the dance industry prior to coming to Middlesex University, the course was able to further my dance knowledge and skills a great deal. It gave me all the necessary tools to become stronger and more physically able”
Rachel Brooks
What makes the Middlesex so good
“Having had experience in the dance industry prior to coming to Middlesex University, the course was able to further my dance knowledge and skills a great deal. It gave me all the necessary tools to become stronger and more physically able”