The full Patient Stories component is made up of two parts: Patient Stories Carousel and a Square Photo card grid. The carousel can be used on it's own.
• Photos should be 400px by 400px.
Patient Stories - Full
Only put one slide in the carousel when using the full component.
Patient Stories
Amazing Happens Here.
<div class="c-patient-stories">
<!-- Unique ID required -->
<div class="c-ps-carousel" id="carousel-111" data-ps-carousel-id="carousel-111">
...
</div>
<div class="c-patient-stories__cards o-grid-pack">
<div class="o-grid o-grid-pack__grid">
<div class="o-grid__item-6 o-grid__item-3@md">
<div class="c-card c-card--square-photo o-ar o-ar--1:1 o-cover-link">
<div class="o-ar__item">
<img src="/images/placeholder/ps-benjamin.jpg" alt="">
</div>
<div class="c-card__body">
<a href="#" class="o-cover-link__overlay u-c-white nyp-type-h5">Dr. Benjamin Carey, Jr III</a>
</div>
</div>
</div>
<div class="o-grid__item-6 o-grid__item-3@md">
<div class="c-card c-card--square-photo o-ar o-ar--1:1 o-cover-link">
<div class="o-ar__item">
<img src="/images/placeholder/ps-daniel.jpg" alt="">
<div class="c-card__body">
<a href="#" class="o-cover-link__overlay u-c-white nyp-type-h5">Daniel Jacobs</a>
</div>
</div>
</div>
</div>
<div class="o-grid__item-6 o-grid__item-3@md">
<div class="c-card c-card--square-photo o-ar o-ar--1:1 o-cover-link">
<div class="o-ar__item">
<img src="/images/placeholder/ps-ryan.jpg" alt="">
<div class="c-card__body">
<a href="#" class="o-cover-link__overlay u-c-white nyp-type-h5">Ryan Finlay</a>
</div>
</div>
</div>
</div>
<div class="o-grid__item-6 o-grid__item-3@md">
<div class="c-card c-card--square-photo o-ar o-ar--1:1 o-cover-link">
<div class="o-ar__item">
<img src="/images/placeholder/ps-trenia.jpg" alt="">
<div class="c-card__body">
<a href="#" class="o-cover-link__overlay u-c-white nyp-type-h5">Trenia Hill</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Patient Stories - Carousel only
Recommend four to five patient stories when using the carousel only.
Patient Stories
Amazing Happens Here.
<!-- Unique ID required -->
<div class="c-ps-carousel" id="carousel-999" data-ps-carousel-id="carousel-999">
<div class="c-carousel__header o-grid__item-12 u-text-center">
<p class="c-carousel__eyebrow nyp-type-eyebrow">Patient Stories</p>
<h2 class="c-carousel__title nyp-type-h2 u-m-b-0">Amazing Happens Here.</h2>
</div>
<div class="c-ps-carousel__container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide u-bg-black">
<div class="c-ps-carousel__card u-d-flex">
<div class="c-ps-carousel__card__image u-d-block" data-ps-bg-img="/images/placeholder/ps-janet.jpg"></div>
<div class="c-ps-carousel__card__text u-c-white u-d-flex u-f-justify-start u-f-align-center">
<div class="">
<p class="nyp-type-eyebrow u-c-white">Testimonial</p>
<p class="nyp-type-body-lede u-m-b-md">“They saved my life. They kept me going. They kept my emotional and physical state of health intact and are allowing me to thrive with continued support.”</p>
<p class="u-m-b-0"><a href="#" class="styled-link">Read Janet's Story</a></p>
</div>
</div>
</div>
</div>
<!-- /end swiper-slide -->
<div class="swiper-slide u-bg-black">
<div class="c-ps-carousel__card u-d-flex">
<div class="c-ps-carousel__card__image u-d-block" data-ps-bg-img="/images/placeholder/ps-ryan.jpg"></div>
<div class="c-ps-carousel__card__text u-c-white u-d-flex u-f-justify-start u-f-align-center">
<div class="">
<p class="nyp-type-eyebrow u-c-white">Testimonial</p>
<p class="nyp-type-body-lede u-m-b-md">“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”</p>
<p class="u-m-b-0"><a href="#" class="styled-link">Read Ryan's Story</a></p>
</div>
</div>
</div>
</div>
<!-- /end swiper-slide -->
<div class="swiper-slide u-bg-black">
<div class="c-ps-carousel__card u-d-flex">
<div class="c-ps-carousel__card__image u-d-block" data-ps-bg-img="/images/placeholder/ps-daniel.jpg"></div>
<div class="c-ps-carousel__card__text u-c-white u-d-flex u-f-justify-start u-f-align-center">
<div class="">
<p class="nyp-type-eyebrow u-c-white">Testimonial</p>
<p class="nyp-type-body-lede u-m-b-md">“Mauris ut velit elit. Vivamus venenatis arcu magna, at ultrices elit dapibus a. Cras erat arcu, mollis ac felis at, mollis finibus velit. Nullam aliquet a dolor eget vehicula.”</p>
<p class="u-m-b-0"><a href="#" class="styled-link">Read Daniel's Story</a></p>
</div>
</div>
</div>
</div>
<!-- /end swiper-slide -->
</div>
<!-- /end swiper-wrapper -->
</div>
<div class="c-carousel__controls c-ps-carousel__controls u-f-align-end" style="display: none;">
<!-- Bullets are injected into 'swiper-pagination' -->
<div class="swiper-pagination"></div>
<div class="swiper-buttons u-m-l">
<button class="swiper-button-prev" aria-label="Previous Slide" tabindex="-1">
<span class="o-svg-icon o-svg-icon--lg">
<svg focusable="false" role="presentation" viewBox="0 0 192 512" shape-rendering="geometricPrecision">
<path d="M4.2 247.5L151 99.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17L69.3 256l118.5 119.7c4.7 4.7 4.7 12.3 0 17L168 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 264.5c-4.7-4.7-4.7-12.3 0-17z" fill="currentColor"/>
</svg>
</span>
</button>
<button class="swiper-button-next" aria-label="Next Slide" tabindex="-1">
<span class="o-svg-icon o-svg-icon--lg">
<svg focusable="false" role="presentation" viewBox="0 0 192 512" shape-rendering="geometricPrecision">
<path d="M187.8 264.5L41 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 392.7c-4.7-4.7-4.7-12.3 0-17L122.7 256 4.2 136.3c-4.7-4.7-4.7-12.3 0-17L24 99.5c4.7-4.7 12.3-4.7 17 0l146.8 148c4.7 4.7 4.7 12.3 0 17z" fill="currentColor" />
</svg>
</span>
</button>
</div>
</div>
<!-- /end c-ps-carousel__controls -->
</div>
<!-- /end c-ps-carousel__container -->
</div>