Skip to main content

Patient Stories

Links:

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.

<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>

Recommend four to five patient stories when using the carousel only.

<!-- 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-text-italic 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-text-italic 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-text-italic 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>