@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/Case Studies Slider/preview.stories.js

@@ -0,0 +1,384 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Case Studies Slider'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        /* Css for slides */
+        .case-studies-slides {
+            height: 80%;
+            width: 100%;
+            padding-bottom: 20px;
+        }
+
+        .case-studies-slides .swiper-slide {
+            /* Center slide text vertically */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-bottom: 30px;
+        }
+
+
+        /* CSS for thumbs */
+        .case-studies-thumbs .swiper-slide img {
+            display: block;
+            width: 100%;
+        }
+
+        /* Firefox specific fix */
+        @-moz-document url-prefix() {
+            .case-studies-thumbs .swiper-slide img {
+                min-width: 140px;
+            }
+        }
+
+        .case-studies-thumbs .swiper-slide::after {
+            content: '';
+            height: 7.5px;
+            width: 100%;
+            position: absolute;
+            bottom: -10px;
+            left: 0;
+        }
+
+        .case-studies-thumbs .swiper-slide-thumb-active::after {
+            background-color: #00890B;
+        }
+
+        .case-studies-thumbs {
+            height: 20%;
+            box-sizing: border-box;
+            padding: 10px 0;
+            background-color: #fff;
+        }
+
+        .case-studies-thumbs .swiper-slide {
+            width: auto;
+            height: auto;
+            max-width: 8.75rem;
+            opacity: 0.4;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            padding: 0 10px;
+        }
+
+        @media (min-width:992px) {
+            .case-studies-thumbs .swiper-slide {
+                max-width: 12.5rem;
+            }
+
+            /* Firefox specific fix */
+            /* @-moz-document url-prefix() {
+                .case-studies-thumbs .swiper-slide img {
+                    min-width: 200px;
+                }
+            } */
+        }
+
+        .case-studies-thumbs .swiper-slide-thumb-active {
+            opacity: 1;
+        }
+
+        .swiper-button-prev,
+        .swiper-button-next {
+            display: none;
+        }
+
+        .swiper-pagination-bullet {
+            background: #ffffff;
+            display: inline-block;
+            height: 1rem;
+            width: 1rem;
+            outline: none;
+            line-height: 0;
+            font-size: 0;
+            border: 1px solid #323B42;
+            padding: 5px;
+            cursor: pointer;
+            margin-right: 32px !important;
+            position: relative;
+            opacity: 1;
+        }
+
+        .swiper-pagination-bullet-active {
+            background: #C37729;
+        }
+
+        .swiper-pagination-bullet::after {
+            content: "";
+            display: block;
+            position: absolute;
+            width: 37px;
+            height: 2px;
+            background-color: #323B42;
+            margin-left: 10px;
+            margin-top: 1px;
+        }
+
+        .swiper-pagination-bullet:last-child::after {
+            display: none;
+        }
+
+        .swiper-pagination {
+            display: block;
+            bottom: 5px;
+        }
+
+        .swiper-slide,
+        .swiper-slide.swiper-slide-prev {
+            visibility: hidden;
+        }
+
+        .swiper-slide.swiper-slide-visible {
+            visibility: visible;
+        }
+
+        @media (min-width: 767px) {
+            .swiper-pagination {
+                display: none;
+            }
+
+            .case-studies-slides {
+                padding-bottom: 0px;
+            }
+        }
+        @media (min-width: 992px) {
+            .case-studies-thumbs {
+                display: flex;
+                justify-content: center;
+            }
+
+            .case-studies-thumbs .swiper-wrapper {
+                transform: none !important;
+                justify-content: center;
+            }
+        }
+    </style>
+<div class="ptc-container">
+        <br>
+        <ptc-title type='h3' upperline="no-upperline">Case Studies Slider</ptc-title>
+        <hr>
+    </div>
+    <section class="case-studies-wrapper">
+        <div thumbsSlider="" class="swiper case-studies-thumbs">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <img src="https://www.ptc.com/-/media/Images/new-org/misc/case-studies/ocado-logo.png" alt="">
+                </div>
+                <div class="swiper-slide">
+                    <img src="https://www.ptc.com/-/media/Images/new-org/logos/Withings.svg" alt="" >
+                </div>
+                <div class="swiper-slide">
+                    <img src="https://www.ptc.com/-/media/Images/new-org/misc/case-studies/avidbots.png" alt="">
+                </div>
+                <div class="swiper-slide">
+                    <img src="https://www.ptc.com/-/media/Images/new-org/logos/BETA.svg" alt="">
+                </div>
+                <div class="swiper-slide">
+                    <img src="https://www.ptc.com/-/media/Images/new-org/misc/case-studies/formulatrix.png" alt="">
+                </div>
+                <div class="swiper-slide">
+                    <img src="https://www.ptc.com/-/media/Images/Case-Studies/logos/premier-cabinetry-logo-margin---CS-Slider.svg" alt="" >
+                </div>
+                <div class="swiper-slide">
+                    <img src="https://www.ptc.com/-/media/Images/new-org/misc/case-studies/amphenol-logo_400x83px.png" alt="" >
+                </div>
+            </div>
+        </div>
+        
+        <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
+            class="swiper case-studies-slides">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+                        slit-position="bottom-right" overlay="false" type="case-studies"
+                        background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/avidbots01366x500.jpg?h=500&w=1366&la=en&hash=29DF7440B3817E0DABBE6260A7E1F216">
+                        <div class="card-content" slot="card-content">
+                            <ptc-title type='h2' text-align='left' upperline="solid" title-height="normal"
+                                title-margin="margin-flush" title-display="block">Ocado</ptc-title>
+                            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6"
+                                para-line-h="line-height-dense"> Ocado
+                                Technology, a world-leading developer of robotics and automation for the online
+                                grocery industry, relies on cloud-native Onshape to accelerate and streamline its
+                                product design process.</ptc-para>
+                            <ptc-button type="link" color="ptc-secondary" link-title="" link-href="https://www.ptc.com"
+                                target="_blank">Read their story
+                            </ptc-button>
+                        </div>
+                    </ptc-text-copy-with-background>
+                </div>
+                <div class="swiper-slide">
+                    <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+                        slit-position="bottom-right" overlay="false" type="case-studies"
+                        background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/withings-1366x500px.jpg?h=500&w=1366&la=en&hash=A264589A607595A7B7205A9C99D5045C">
+                        <div class="card-content" slot="card-content">
+                            <ptc-title type='h2' text-align='left' upperline="solid" title-height="normal"
+                                title-margin="margin-flush" title-display="block">Withings</ptc-title>
+                            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6"
+                                para-line-h="line-height-dense"> Hybrid
+                                smartwatch pioneer relies on cloud-native Onshape to streamline collaboration
+                                between its globally distributed design teams.</ptc-para>
+                            <ptc-button type="link" color="ptc-secondary" link-title="" link-href="https://www.ptc.com"
+                                target="_blank">Watch the Video
+                            </ptc-button>
+                        </div>
+                    </ptc-text-copy-with-background>
+                </div>
+                <div class="swiper-slide">
+                    <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+                        slit-position="bottom-right" overlay="false" type="case-studies"
+                        background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/avidbots01366x500.jpg?h=500&w=1366&la=en&hash=29DF7440B3817E0DABBE6260A7E1F216">
+                        <div class="card-content" slot="card-content">
+                            <ptc-title type='h2' text-align='left' upperline="solid" title-height="normal"
+                                title-margin="margin-flush" title-display="block">Avidbots</ptc-title>
+                            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6"
+                                para-line-h="line-height-dense"> Fully
+                                autonomous robotics developer relies on Onshape’s real-time data management to
+                                improve collaboration with its global design and manufacturing partners.</ptc-para>
+                            <ptc-button type="link" color="ptc-secondary"
+                                link-href="https://www.onshape.com/en/resource-center/case-studies/avidbots"
+                                target="_blank" link-title="Read the Avidbot's Story">Read the Story
+                            </ptc-button>
+                        </div>
+                    </ptc-text-copy-with-background>
+                </div>
+                <div class="swiper-slide">
+                    <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+                        slit-position="bottom-right" overlay="false" type="case-studies"
+                        background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/beta-1366x500.jpg?h=500&w=1366&la=en&hash=34913CDBD0651B82E39EF580B4BCAB59">
+                        <div class="card-content" slot="card-content">
+                            <ptc-title type='h2' text-align='left' upperline="solid" title-height="normal"
+                                title-margin="margin-flush" title-display="block">Beta Technologies</ptc-title>
+                            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6"
+                                para-line-h="line-height-dense">
+                                Pioneering eVTOL aerospace company relies on cloud-native Onshape to accelerate
+                                their CAD design process.</ptc-para>
+                            <ptc-button type="link" color="ptc-secondary"
+                                link-href="https://www.onshape.com/en/resource-center/case-studies/avidbots"
+                                target="_blank" link-title="">Watch the video
+                            </ptc-button>
+                        </div>
+                    </ptc-text-copy-with-background>
+                </div>
+                <div class="swiper-slide">
+                    <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+                        slit-position="bottom-right" overlay="false" type="case-studies"
+                        background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/formulatrix-1366x500.jpg?h=500&w=1366&la=en&hash=932AFE35D2FEF5BDAD8B80A9A2D3FFD1">
+                        <div class="card-content" slot="card-content">
+                            <ptc-title type='h2' text-align='left' upperline="solid" title-height="normal"
+                                title-margin="margin-flush" title-display="block">Formulatrix</ptc-title>
+                            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6"
+                                para-line-h="line-height-dense">
+                                Luxury furniture manufacturer uses Onshape’s custom CAD features to automate
+                                repetitive design tasks.</ptc-para>
+                            <ptc-button type="link" color="ptc-secondary"
+                                link-href="https://www.onshape.com/en/resource-center/case-studies/avidbots"
+                                target="_blank" link-title="">Read the Story
+                            </ptc-button>
+                        </div>
+                    </ptc-text-copy-with-background>
+                </div>
+                <div class="swiper-slide">
+                    <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+                        slit-position="bottom-right" overlay="false" type="case-studies"
+                        background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/Premier-Custom-Built-1366x500.jpg?h=500&w=1366&la=en&hash=CFCD775B88A4F0E71EBC7EA9C1B3CC35">
+                        <div class="card-content" slot="card-content">
+                            <ptc-title type='h2' text-align='left' upperline="solid" title-height="normal"
+                                title-margin="margin-flush" title-display="block">Premier Custom-Built</ptc-title>
+                            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6"
+                                para-line-h="line-height-dense">
+                                Luxury furniture manufacturer uses Onshape’s custom CAD features to automate repetitive
+                                design tasks.</ptc-para>
+                            <ptc-button type="link" color="ptc-secondary"
+                                link-href="https://www.ptc.com/en/case-studies/premier-custom-built-digital-transformation"
+                                target="_blank" link-title="">Watch the Video
+                            </ptc-button>
+                        </div>
+                    </ptc-text-copy-with-background>
+                </div>
+                <div class="swiper-slide">
+                    <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+                        slit-position="bottom-right" overlay="false" type="case-studies"
+                        background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/amphenol-1366x500.jpg?h=500&w=1366&la=en&hash=8E1E096E9D12E29FA418447CC9326ED6">
+                        <div class="card-content" slot="card-content">
+                            <ptc-title type='h2' text-align='left' upperline="solid" title-height="normal"
+                                title-margin="margin-flush" title-display="block">Amphenol</ptc-title>
+                            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6"
+                                para-line-h="line-height-dense">
+                                Luxury furniture manufacturer uses Onshape’s custom CAD features to automate repetitive design tasks.</ptc-para>
+                            <ptc-button type="link" color="ptc-secondary"
+                                link-href="https://www.ptc.com/en/case-studies/premier-custom-built-digital-transformation"
+                                target="_blank" link-title="">Read the Story
+                            </ptc-button>
+                        </div>
+                    </ptc-text-copy-with-background>
+                </div>
+            </div>
+            
+            <div class="swiper-pagination"></div>
+            <div class="swiper-button-next"></div>
+            <div class="swiper-button-prev"></div>
+        </div>
+    </section>
+    
+    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
+
+    
+    <script>
+        window.onload = function exampleFunction() {
+            var caseStudiesThumbs = new Swiper(".case-studies-thumbs", {
+                loop: false,
+                slidesPerView: 'auto',
+                freeMode: true,
+                watchSlidesProgress: true,
+                centerInsufficientSlides: true,
+                clickable: true,
+                breakpoints: {
+                    992: {
+                        slidesPerView: 7,
+                    }
+                }
+            });
+            var caseStudiesSlides = new Swiper(".case-studies-slides", {
+                loop: false,
+                grabCursor: true,
+                effect: "fade",
+                autoplay: {
+                    delay: 10000,
+                    disableOnInteraction: false,
+                    waitForTransition: true
+                },
+                thumbs: {
+                    swiper: caseStudiesThumbs,
+                },
+                // If we need pagination
+                pagination: {
+                    el: '.swiper-pagination',
+                    clickable: true
+                },
+
+            });
+
+            caseStudiesSlides.on('slideChange', () => {
+
+                const tagName = document.querySelector('.swiper-slide-visible ptc-text-copy-with-background').shadowRoot;
+                const content = tagName.querySelector('.card-wrap');
+                const parent = tagName.querySelector('.card-wrap').parentNode
+                // Remove the content element from the DOM
+                parent.removeChild(content);
+                // Re-insert the content element in its original location to show the animation
+                parent.appendChild(content);
+            });
+        }
+    </script>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Case Studies Slider New/preview.stories.js

@@ -0,0 +1,171 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Case Studies Slider New'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container">
+    <br>
+    <ptc-title type='h3' upperline="no-upperline">Case Studies Slider</ptc-title>
+    <hr>
+  </div>
+  <ptc-case-studies-slider>
+    
+    <div slot="thumb-slides" class="thumb-slides">
+      <div class="swiper-slide swiper-slide-thumb">
+        <img src="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" alt="" >
+      </div>
+      <div class="swiper-slide swiper-slide-thumb">
+        <img src="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" alt="" >
+      </div>
+      <div class="swiper-slide swiper-slide-thumb">
+        <img src="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" alt="" >
+      </div>
+      <div class="swiper-slide swiper-slide-thumb">
+        <img src="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" alt="" >
+      </div>
+      <div class="swiper-slide swiper-slide-thumb">
+        <img src="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" alt="" >
+      </div>
+      <div class="swiper-slide swiper-slide-thumb">
+        <img src="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+          alt="" >
+      </div>
+      <div class="swiper-slide swiper-slide-thumb">
+        <img src="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" alt="" >
+      </div>
+    </div>
+    
+    <div slot="content-slides" class="content-slides">
+      <div class="swiper-slide swiper-slide-content">
+        <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+          slit-position="bottom-right" overlay="false" type="case-studies"
+          background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/avidbots01366x500.jpg?h=500&w=1366&la=en&hash=29DF7440B3817E0DABBE6260A7E1F216">
+          <div class="card-content" slot="card-content">
+            <ptc-title type='h3' title-size='large' text-align='left' upperline="solid" title-height="normal" title-margin="margin-flush"
+              title-display="block">Ocado</ptc-title>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6" para-line-h="line-height-dense">
+              Ocado
+              Technology, a world-leading developer of robotics and automation for the online
+              grocery industry, relies on cloud-native Onshape to accelerate and streamline its
+              product design process.</ptc-para>
+            <ptc-button type="link" color="ptc-secondary" link-title="" link-href="https://www.ptc.com"
+              target="_blank">Read their story
+            </ptc-button>
+          </div>
+        </ptc-text-copy-with-background>
+      </div>
+      <div class="swiper-slide swiper-slide-content">
+        <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+          slit-position="bottom-right" overlay="false" type="case-studies"
+          background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/withings-1366x500px.jpg?h=500&w=1366&la=en&hash=A264589A607595A7B7205A9C99D5045C">
+          <div class="card-content" slot="card-content">
+            <ptc-title type='h3' title-size='large' text-align='left' upperline="solid" title-height="normal" title-margin="margin-flush"
+              title-display="block">Withings</ptc-title>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6" para-line-h="line-height-dense">
+              Hybrid
+              smartwatch pioneer relies on cloud-native Onshape to streamline collaboration
+              between its globally distributed design teams.</ptc-para>
+            <ptc-button type="link" color="ptc-secondary" link-title="" link-href="https://www.ptc.com"
+              target="_blank">Watch the Video
+            </ptc-button>
+          </div>
+        </ptc-text-copy-with-background>
+      </div>
+      <div class="swiper-slide swiper-slide-content">
+        <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+          slit-position="bottom-right" overlay="false" type="case-studies"
+          background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/avidbots01366x500.jpg?h=500&w=1366&la=en&hash=29DF7440B3817E0DABBE6260A7E1F216">
+          <div class="card-content" slot="card-content">
+            <ptc-title type='h3' title-size='large' text-align='left' upperline="solid" title-height="normal" title-margin="margin-flush"
+              title-display="block">Avidbots</ptc-title>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6" para-line-h="line-height-dense">
+              Fully
+              autonomous robotics developer relies on Onshape’s real-time data management to
+              improve collaboration with its global design and manufacturing partners.</ptc-para>
+            <ptc-button type="link" color="ptc-secondary"
+              link-href="https://www.onshape.com/en/resource-center/case-studies/avidbots" target="_blank"
+              link-title="Read the Avidbot's Story">Read the Story
+            </ptc-button>
+          </div>
+        </ptc-text-copy-with-background>
+      </div>
+      <div class="swiper-slide swiper-slide-content">
+        <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+          slit-position="bottom-right" overlay="false" type="case-studies"
+          background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/beta-1366x500.jpg?h=500&w=1366&la=en&hash=34913CDBD0651B82E39EF580B4BCAB59">
+          <div class="card-content" slot="card-content">
+            <ptc-title type='h3' text-align='left' upperline="solid" title-height="normal" title-margin="margin-flush"
+              title-display="block">Beta Technologies</ptc-title>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6" para-line-h="line-height-dense">
+              Pioneering eVTOL aerospace company relies on cloud-native Onshape to accelerate
+              their CAD design process.</ptc-para>
+            <ptc-button type="link" color="ptc-secondary"
+              link-href="https://www.onshape.com/en/resource-center/case-studies/avidbots" target="_blank"
+              link-title="">Watch the video
+            </ptc-button>
+          </div>
+        </ptc-text-copy-with-background>
+      </div>
+      <div class="swiper-slide swiper-slide-content">
+        <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+          slit-position="bottom-right" overlay="false" type="case-studies"
+          background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/formulatrix-1366x500.jpg?h=500&w=1366&la=en&hash=932AFE35D2FEF5BDAD8B80A9A2D3FFD1">
+          <div class="card-content" slot="card-content">
+            <ptc-title type='h3' text-align='left' upperline="solid" title-height="normal" title-margin="margin-flush"
+              title-display="block">Formulatrix</ptc-title>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6" para-line-h="line-height-dense">
+              Luxury furniture manufacturer uses Onshape’s custom CAD features to automate
+              repetitive design tasks.</ptc-para>
+            <ptc-button type="link" color="ptc-secondary"
+              link-href="https://www.onshape.com/en/resource-center/case-studies/avidbots" target="_blank"
+              link-title="">Read the Story
+            </ptc-button>
+          </div>
+        </ptc-text-copy-with-background>
+      </div>
+      <div class="swiper-slide swiper-slide-content">
+        <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+          slit-position="bottom-right" overlay="false" type="case-studies"
+          background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/Premier-Custom-Built-1366x500.jpg?h=500&w=1366&la=en&hash=CFCD775B88A4F0E71EBC7EA9C1B3CC35">
+          <div class="card-content" slot="card-content">
+            <ptc-title type='h3' text-align='left' upperline="solid" title-height="normal" title-margin="margin-flush"
+              title-display="block">Premier Custom-Built</ptc-title>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6" para-line-h="line-height-dense">
+              Luxury furniture manufacturer uses Onshape’s custom CAD features to automate repetitive
+              design tasks.</ptc-para>
+            <ptc-button type="link" color="ptc-secondary"
+              link-href="https://www.ptc.com/en/case-studies/premier-custom-built-digital-transformation"
+              target="_blank" link-title="">Watch the Video
+            </ptc-button>
+          </div>
+        </ptc-text-copy-with-background>
+      </div>
+      <div class="swiper-slide swiper-slide-content">
+        <ptc-text-copy-with-background is-background-blur="false" top-slit-background-color="white"
+          slit-position="bottom-right" overlay="false" type="case-studies"
+          background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/amphenol-1366x500.jpg?h=500&w=1366&la=en&hash=8E1E096E9D12E29FA418447CC9326ED6">
+          <div class="card-content" slot="card-content">
+            <ptc-title type='h3' text-align='left' upperline="solid" title-height="normal" title-margin="margin-flush"
+              title-display="block">Amphenol</ptc-title>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6" para-line-h="line-height-dense">
+              Luxury furniture manufacturer uses Onshape’s custom CAD features to automate repetitive design
+              tasks.</ptc-para>
+            <ptc-button type="link" color="ptc-secondary"
+              link-href="https://www.ptc.com/en/case-studies/premier-custom-built-digital-transformation"
+              target="_blank" link-title="">Read the Story
+            </ptc-button>
+          </div>
+        </ptc-text-copy-with-background>
+      </div>
+    </div>
+  </ptc-case-studies-slider>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();