Testimonial Type 2

Pattern HTML

<!-- wp:group {"metadata":{"name":"Testimonial Panel"},"align":"wide","className":"testimonial-slider","style":{"elements":{"link":{"color":{"text":"var:preset|color|two"}}},"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|70"}}},"textColor":"two","layout":{"type":"constrained","contentSize":"1450px"}} --> <div class="wp-block-group alignwide testimonial-slider has-two-color has-text-color has-link-color" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--70)"><!-- wp:da/wp-swiper-slides {"containerWidth":71,"previousIcon":"https://coastlineindev.wpenginepowered.com/wp-content/uploads/2025/10/fi_11399530-1.svg","nextIcon":"https://coastlineindev.wpenginepowered.com/wp-content/uploads/2025/10/fi_11399530.svg","clickable_pagination":true,"tabsData":[{"clientId":"e5462c3a-e8ff-4745-bcab-9294473340a8","slug":"slide-1"},{"clientId":"ebf66389-7844-46cd-8a5d-434404a677c8","slug":"slide-2"},{"clientId":"2232999d-303a-4eee-ab21-dda800baf617","slug":"slide-3"},{"clientId":"cbabc041-37e9-471b-a079-296a4915dd24","slug":"slide-4"}]} --> <div class="wp-swiper"><div class="wp-swiper__wrapper"><div class="swiper-container swiper" data-swiper="{&quot;slidesPerView&quot;:&quot;1&quot;,&quot;slidesPerGroup&quot;:1,&quot;slidesPerGroupAuto&quot;:false,&quot;slidesPerGroupSkip&quot;:0,&quot;navigation&quot;:true,&quot;pagination&quot;:{&quot;type&quot;:&quot;bullets&quot;,&quot;clickable&quot;:true},&quot;delay&quot;:3000,&quot;speed&quot;:500,&quot;loop&quot;:false,&quot;direction&quot;:&quot;horizontal&quot;,&quot;slidesOffsetBefore&quot;:0,&quot;slidesOffsetAfter&quot;:0,&quot;autoHeight&quot;:true,&quot;spaceBetween&quot;:0,&quot;releaseOnEdges&quot;:false,&quot;effect&quot;:&quot;slide&quot;}"><div class="swiper-wrapper"><!-- wp:da/wp-swiper-slide {"slug":"slide-1","containerWidth":71} --> <div data-tab="slide-1" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content" style="max-width:71%"><!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">"Coastline has been a manufacturing partner for many years, supporting the growth of our business and increased volume in production as our product demand has scaled. Coastline is committed to Quality, and consistently reliable.</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">The team is always available and we appreciate the ability to visit the site conveniently as needed. Transferring production to Coastline has provided a cost-reduction solution while also providing increased capacity."</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">—President, US-based Medical Device OEM</p> <!-- /wp:paragraph --></div> <!-- /wp:group --></div></div> <!-- /wp:da/wp-swiper-slide --> <!-- wp:da/wp-swiper-slide {"slug":"slide-2","containerWidth":71} --> <div data-tab="slide-2" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content" style="max-width:71%"><!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">"Coastline has been a manufacturing partner for many years, supporting the growth of our business and increased volume in production as our product demand has scaled. Coastline is committed to Quality, and consistently reliable.</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">The team is always available and we appreciate the ability to visit the site conveniently as needed. Transferring production to Coastline has provided a cost-reduction solution while also providing increased capacity."</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">—President, US-based Medical Device OEM</p> <!-- /wp:paragraph --></div> <!-- /wp:group --></div></div> <!-- /wp:da/wp-swiper-slide --> <!-- wp:da/wp-swiper-slide {"slug":"slide-3","containerWidth":71} --> <div data-tab="slide-3" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content" style="max-width:71%"><!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">"Coastline has been a manufacturing partner for many years, supporting the growth of our business and increased volume in production as our product demand has scaled. Coastline is committed to Quality, and consistently reliable.</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">The team is always available and we appreciate the ability to visit the site conveniently as needed. Transferring production to Coastline has provided a cost-reduction solution while also providing increased capacity."</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">—President, US-based Medical Device OEM</p> <!-- /wp:paragraph --></div> <!-- /wp:group --></div></div> <!-- /wp:da/wp-swiper-slide --> <!-- wp:da/wp-swiper-slide {"slug":"slide-4","containerWidth":71} --> <div data-tab="slide-4" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content" style="max-width:71%"><!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">"Coastline has been a manufacturing partner for many years, supporting the growth of our business and increased volume in production as our product demand has scaled. Coastline is committed to Quality, and consistently reliable.</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">The team is always available and we appreciate the ability to visit the site conveniently as needed. Transferring production to Coastline has provided a cost-reduction solution while also providing increased capacity."</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">—President, US-based Medical Device OEM</p> <!-- /wp:paragraph --></div> <!-- /wp:group --></div></div> <!-- /wp:da/wp-swiper-slide --></div></div><div class="wp_swiper__navigation"><div class="wp_swiper__navigation-container"><div class="swiper-button-prev wp_swiper__button-prev"><img src="https://coastlineindev.wpenginepowered.com/wp-content/uploads/2025/10/fi_11399530-1.svg" alt="Previous"/></div><div class="swiper-button-next wp_swiper__button-next"><img src="https://coastlineindev.wpenginepowered.com/wp-content/uploads/2025/10/fi_11399530.svg" alt="Previous"/></div></div></div><div class="swiper-pagination"></div></div></div> <!-- /wp:da/wp-swiper-slides --></div> <!-- /wp:group -->

Pattern CSS

.testimonial-slider .wp-swiper > .wp-swiper__wrapper { text-align: center; } .testimonial-slider .swiper-container { position: relative; padding-top: 75px; } .testimonial-slider .swiper-container:before { content: ""; display: block; position: absolute; top: 0px; left: 60px; width: 216px; height: 151px; background-image: url(/wp-content/uploads/2025/11/opening-quote.png); } .testimonial-slider .swiper-container:after { content: ""; display: block; position: absolute; bottom: 0px; right: 60px; width: 216px; height: 151px; background-image: url(/wp-content/uploads/2025/11/closing-quote.png); } #site-container .swiper-pagination { position: relative; margin-top: 50px; display: inline-block; border: 1px solid var(--wp--preset--color--six); border-radius: 20px; padding: 2px 5px; width: fit-content; } #site-container .swiper-pagination-bullet { width: 13px; height: 13px; background: rgba(130, 128, 129, 0.20); opacity: 1; } #site-container .swiper-pagination-bullet-active, #site-container .swiper-pagination-bullet:hover { background: var(--wp--preset--color--four); }