Testimonials/Quotes Fancy

When to Use

Use this when you want to show testimonials about the benefits of your program or initiative.

Example: Standard Testimonials Fancy

Testimonials Headline

Subhead goes here.

Firstname Lastname

TitleName of Organization

“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.”

Firstname Lastname

TitleName of Organization

“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.”

Firstname Lastname

TitleName of Organization

“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.”

Put additional info or links here.

View Code

Copy


<section id="testimonials-fancy-1" aria-labelledby="testimonials-fancy-1-label" class="  py-5 text-center">  
  <div class="wvu-z-index-content">
    <div class="position-relative wvu-z-index-content">      
      <div class="container">          
        <h2 id="testimonials-fancy-1-label" class="display-3 wvu-shout text-wvu-blue">Testimonials Headline</h2>
        <p class="h3 helvetica-neue-light text-wvu-blue">Subhead goes here.</p>      
      </div>        
      <div class="container">        </div>      
      <div class="container-fluid">
        <div class="row justify-content-left px-md-2">          
          <div class="col-md-6 col-lg-4 d-flex align-items-stretch text-start position-relative">
            <div class="p-2 w-100">              
              <div class="ps-3 pe-3 pb-3 pt-4 h-100 wvu-bg-position-top-left--30 wvu-bg-position-xl-top-left wvu-bg-size-cover bg-wvu-accent--blue-dark" style="background-image: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%), url(/files/60dc4105-15c1-4f96-9769-54d0a9b83a4c/960x640.webp?cb=a189ad6f00c0d4ad0750fe93f47d0c4f/960x640.jpg);">
                <div class="row align-items-end h-100">
                  <div class="col-xl-6 pt-lg-6 mt-6 mt-xl-0 pt-xl-0 me-md-auto mb-xl-n3">
                    <h3 style="text-shadow: 7px 5px 16px rgba(0,0,0,0.64);">
                      <a class="text-decoration-none pt-6 pt-md-0 wvu-shout text-wvu-gold ms-n4 h1 stretched-link" href="https://designsystem.wvu.edu/profiles/person-a">                          Firstname Lastname                      </a>
                    </h3>                      
                    <p class="wvu-shout text-white h5 wvu-bar wvu-bar--white wvu-bar--bottom wvu-bar--skinny">
                      <span class="d-block">Title</span>
                      <span class="d-block">Name of Organization</span>
                    </p>                  
                  </div>
                  <div class="col-xl-6 me-md-auto">
                    <div class="bg-white p-3 p-xl-2 mt-xl-5 text-center wvu-z-index-content">
                      <blockquote class="h6 mb-0 mx-0">
                        <p class="mb-0">
                          <span class="d-block iowan-old-style-black-italic">“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.”</span>
                        </p>
                      </blockquote>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>          
          <div class="col-md-6 col-lg-4 d-flex align-items-stretch text-start position-relative">
            <div class="p-2 w-100">              
              <div class="ps-3 pe-3 pb-3 pt-4 h-100 wvu-bg-position-top-left--30 wvu-bg-position-xl-top-left wvu-bg-size-cover bg-wvu-accent--blue-dark" style="background-image: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%), url(/files/73c0bbb6-1099-42ee-aa51-8e13699921eb/960x640.webp?cb=aa47136856a2a17115f902a0265455a2/960x640.jpg);">
                <div class="row align-items-end h-100">
                  <div class="col-xl-6 pt-lg-6 mt-6 mt-xl-0 pt-xl-0 me-md-auto mb-xl-n3">
                    <h3 style="text-shadow: 7px 5px 16px rgba(0,0,0,0.64);">
                      <a class="text-decoration-none pt-6 pt-md-0 wvu-shout text-wvu-gold ms-n4 h1 stretched-link" href="https://designsystem.wvu.edu/profiles/person-b">                          Firstname Lastname                      </a>
                    </h3>                      
                    <p class="wvu-shout text-white h5 wvu-bar wvu-bar--white wvu-bar--bottom wvu-bar--skinny">
                      <span class="d-block">Title</span>
                      <span class="d-block">Name of Organization</span>
                    </p>                  
                  </div>
                  <div class="col-xl-6 me-md-auto">
                    <div class="bg-white p-3 p-xl-2 mt-xl-5 text-center wvu-z-index-content">
                      <blockquote class="h6 mb-0 mx-0">
                        <p class="mb-0">
                          <span class="d-block iowan-old-style-black-italic">“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.”</span>
                        </p>
                      </blockquote>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>          
          <div class="col-md-6 col-lg-4 d-flex align-items-stretch text-start position-relative">
            <div class="p-2 w-100">              
              <div class="ps-3 pe-3 pb-3 pt-4 h-100 wvu-bg-position-top-left--30 wvu-bg-position-xl-top-left wvu-bg-size-cover bg-wvu-accent--blue-dark" style="background-image: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%), url(/files/dca6d3e9-1e06-4398-b7a3-ca00d278f091/960x640.webp?cb=ed1aa77f1d707ba5deb327d1c08ebe7c/960x640.jpg);">
                <div class="row align-items-end h-100">
                  <div class="col-xl-6 pt-lg-6 mt-6 mt-xl-0 pt-xl-0 me-md-auto mb-xl-n3">
                    <h3 style="text-shadow: 7px 5px 16px rgba(0,0,0,0.64);">
                      <a class="text-decoration-none pt-6 pt-md-0 wvu-shout text-wvu-gold ms-n4 h1 stretched-link" href="https://designsystem.wvu.edu/profiles/person-c">                          Firstname Lastname                      </a>
                    </h3>                      
                    <p class="wvu-shout text-white h5 wvu-bar wvu-bar--white wvu-bar--bottom wvu-bar--skinny">
                      <span class="d-block">Title</span>
                      <span class="d-block">Name of Organization</span>
                    </p>                  
                  </div>
                  <div class="col-xl-6 me-md-auto">
                    <div class="bg-white p-3 p-xl-2 mt-xl-5 text-center wvu-z-index-content">
                      <blockquote class="h6 mb-0 mx-0">
                        <p class="mb-0">
                          <span class="d-block iowan-old-style-black-italic">“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.”</span>
                        </p>
                      </blockquote>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>      
        </div>
      </div>      
      <div class="container">          
        <div class="mt-3">            
          <p class="mb-0">Put additional info or 
            <a href="#">links</a> here.
          </p>
        </div>      
      </div>
    </div>
  </div>
</section>

Content	Length	Guidelines
Header*	Component Header Maxiumum of 255 characters	A header that introduces the featured pages.
Subhead	Maximum of 255 characters	A more specific description of the content.
Quotes	255	A quote for each person.
Name*	N/A	The name of the person giving the testimonial.
Title	N/A	The title (if a faculty member) or academic program and graduating class (if a student).
Item CTA	Maximum of 40 characters	A button to view the person’s profile.

Name	Options	Description
`limit`	Any Number	Sets the number of items that will appear in the component.
`showHidden`	`true` `false`	If set to `true`, shows items even if they’re hidden from your site’s navigation.
`customLabel`	`whatever-label-you-want`	If you enter a label, it will replace the default label used to pull in dynamic content.

Name	Options	Description
`editModeOnly`	`true`	If set to true, the component will only appear in Edit Mode. This is useful for testing your component before you want to make it live.
`main`	`true`	If set to true, a `<main></main>` element will apply to the component.
`scope`	`page site`	If set to site, content in the editable regions of the component will apply sitewide to any component with the same name and instance number that is also set to `scope: "site"`.

Name	Options	Description
Limit	Any Number	Sets the number of items that will appear in the component.
Show if Hidden	`checked` `unchecked`	If set to `true`, shows items even if they’re hidden from your site’s navigation.
Custom Label	`whatever-label-you-want`	If you enter a label, it will replace the default label used to pull in dynamic content.

Name	Options	Description
Edit Mode Only	`checked unchecked`	If checked, the component will only appear in Edit Mode. This is useful for testing your component before you want to make it live.
Is Main	`checked unchecked`	If checked, a `<main></main>` element will apply to the component.
Sitewide	`checked unchecked`	If checked, content in the editable regions of the component will apply sitewide to any other component with the same name and instance number that is also set to “Sitewide”.

Active Campus Alert

Shared Partial Name:

When to Use

Example: Standard Testimonials Fancy

Testimonials Headline

Firstname Lastname

Firstname Lastname

Firstname Lastname

Content Model and Styling Guidelines

Content-Specific Guidelines

Shared CleanSlate Partial

Collection Parameters

General Component Parameters

Code Example

Setup

Collection Parameters

General Component Configuration