Testimonial Page Block

This page block helps to add validation to your content, and comes in a couple different variations to fit your content needs.

How To | Style Guide | Content Styles | Accessibility Tips | Page Blocks

Check out the series of variations on this page to understand the full capability (white bg)

For clarity, this text was written using the “Basic Content Page Block”, and the Background Color is set to “white”. In the page block below, the “Testimonial Page Block” the container around the text/content can be either black or navy. The container is designed to look like it overlaps the block above it and below it. The testimonial can be on the positioned on the right side or on the left side of the page.

Caring for our clients, caring for our team members, it’s in our bones. Care is what centers us and makes what we deliver exceptional.

FPO 75x75

Firstname Lastname

CEO

Google

This Basic Content Section has been added to demonstrate how the Testimonial page block background color changes (navy bg)

There’s a sibling component in the code that tells the top portion of the section background to change color based on the section background color in the page block above.

Caring for our clients, caring for our team members, it’s in our bones. Care is what centers us and makes what we deliver exceptional.

Firstname Lastname

Company Name

This Basic Content Section has been added to demonstrate how the Testimonial page block background color changes (black bg)

There’s a sibling component in the code that tells the top portion of the section background to change color based on the section background color in the page block above.

What happens if we don’t use an H2 in here? This Testimonial variation does not include a headshot, and also does not include some other info… I’m trying to see how this block holds up when some info isn’t used.

Firstname Lastname

Job Title

Be mindful of the sections background colors above and below the Testimonial Page Block (light blue bg)

Since the container around the large text is always light blue, if the section above or the section below are also light blue, then it might look strange.

What’s nice about using the WYSIWYG TinyMCE for the testimonial, is that the admin has the ability to use a couple different font styles.

But! That means that the admin needs to be very disciplined to use the H2 for the larger text, and then use paragraph for smaller text. For clarity, the larger text could be to highlight an important phrase from the whole quote, and the smaller paragraph text could be used to share the entire quote/testimonial.

FPO 75x75

Firstname Lastname

Job Title

Clickable Company Name