When to Use
Example: Standard Testimonials Fancy
Testimonials Headline
Subhead goes here.
“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.”
“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.”
“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.”
Put additional info or links here.
<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>