@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/Search Result News/preview.stories.js

@@ -0,0 +1,72 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Search Result News'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="">
+        
+        <div class="ptc-container">
+            <div class="is-grid has-row-gap-sm is-col-12">
+                <div class="is-col-5 is-col-11-sm is-flex flex-align-items-center">
+                    <ptc-nav-tile id="ptcNavLinks"></ptc-nav-tile>
+                </div>
+                
+                <div class="is-col-7 is-col-1-sm search-container is-flex-column is-flex flex-align-items">
+                    <ptc-search-field is-news="true"></ptc-search-field>
+                    <ptc-button color="clear-search" class="u-marginTop-md">Clear Search</ptc-button>
+                </div>
+                
+            </div>
+        </div>
+        
+        <ptc-spacer breakpoint="small" size="medium"></ptc-spacer>
+        <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+        
+        
+        <div class="ptc-container ptc-section-standard ptc-section-standard">
+            
+            <news-search-result></news-search-result>
+        </div>
+
+        <style>
+            .no-result-section {
+                justify-content: center;
+                display: flex;
+            }
+        </style>
+        <div class="ptc-container-lg ptc-section-standard no-result-section">
+            <ptc-card-wrapper card-type="result-box">
+                <ptc-para font-size="large" font-weight="w-7" para-margin="margin-bottom-2"
+                    para-line-h="line-height-densest">
+                    No Results Found
+                </ptc-para>
+                <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-bottom-6"
+                    para-line-h="line-height-p">
+                    Please try changing your keywords
+                </ptc-para>
+                <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">Clear
+                    Search</ptc-button>
+            </ptc-card-wrapper>
+        </div>
+    </div>
+<script>
+    document.addEventListener('DOMContentLoaded', function(){
+        var ptcNavTiles = document.getElementById('ptcNavLinks');
+        var navs = [
+            {title: 'Media Kit', url: 'https://www.ptc.com'}, 
+            {title: 'Leadership', url: '#'},
+            {title: 'Our Products', url: '#'},
+            {title: 'Brand Guide', url: '#'}
+        ]
+        ptcNavTiles.navLinks = navs
+    })
+</script>
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Searchbar Plm On Demand/preview.stories.js

@@ -0,0 +1,62 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Searchbar Plm On Demand'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-hero hero-type="jumbotron" class="ptc-jumbotron"
+        bg-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway">
+        
+        <div class="ptc-container-lg is-grid has-col-12">
+            
+            <div class="is-grid has-row-gap-sm is-col-12">
+                <ptc-breadcrumb class="is-col-11">
+                    <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us">PLM Video
+                        Hub</list-item>
+                    <list-item list-type="breadcrumb">Current Page</list-item>
+                </ptc-breadcrumb>
+                
+                <ptc-search-field dark-theme="true" class="is-col-1">
+                </ptc-search-field>
+                
+                <div class="is-col-12">
+                    <ptc-spacer breakpoint="x-small" size="space-128"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="space-128"></ptc-spacer>
+                </div>
+                <ptc-span span-style="plm-hub-style" display="block" exportparts="part-ptc-span"
+                    class="u-hero-width is-col-12">Featured
+                    Video</ptc-span>
+                <ptc-title type="h1" upperline="no-upperline" is-plm-hub title-size="xxxx-large" title-weight="w-8"
+                    class="u-hero-width is-col-12">Making Industrial Innovation a
+                    Reality</ptc-title>
+                <ptc-para font-size="x-small" font-weight="w-5" para-margin="margin-flush" para-color="white"
+                    para-line-h="line-height-19" class="u-hero-width is-col-12">
+                    See how Polaris and Whirlpool Corporation are driving digital transformation and industrial
+                    innovation for
+                    their customers.
+                </ptc-para>
+                <ptc-link class="has-m-top u-hero-width is-col-12" href="https://www.ptc.com" link-title="PTC"
+                    theme="arrow-plm">Watch
+                    Now
+                </ptc-link>
+                <div class="is-col-12">
+                    <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+                </div>
+            </div>
+        </div>
+    </ptc-hero>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Seo Test/preview.stories.js

@@ -0,0 +1,215 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Seo Test'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-section-standard">
+
+        <ptc-announcement bar-title="Title 50 characters Lorem Ipsum"
+            description="Description 80 characters lorem ipsum dolor sit amet consecutor"
+            link-text="CTA Action 25 characters" link-title="Text on hover" link-url="http://www.ptc.com"
+            target="_blank" visible="true">
+            
+            <h2 slot="seo-content">Title 50 characters Lorem Ipsum</h2>
+            <p slot="seo-content">Description 80 characters lorem ipsum dolor sit amet consecuto</p>
+        </ptc-announcement>
+        <div class="ptc-container">
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+            <hr>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+            <div class="is-grid">
+                <ptc-card-wrapper class="is-col-4" card-link="https://www.ptc.com/" card-type="card-tall"
+                    is-loading="false" link-target="_blank" link-title="Link title on hover">
+                    <ptc-card-content card-type="card-tall">
+
+                        <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative"
+                            is-full-height="" src="https://placehold.co/600x400" size-xs="435x480" size-sm="435x480"
+                            size-md="878x655" size-lg="878x655">
+                            <ptc-overlay filter-color="green" border-radius="radius-large"></ptc-overlay>
+                        </ptc-picture>
+                    </ptc-card-content>
+                    <ptc-card-bottom card-type="card-tall">
+                        <ptc-title type="h3" upperline="no-upperline" title-shadow="green" is-plm-hub=""
+                            title-size="large" title-weight="w-8" title-l-height="lh-23" seo-compatibility-mode="true">
+                            <h3>Collaborative Approach Between Design and Manufacturing</h3>
+                        </ptc-title>
+                    </ptc-card-bottom>
+                </ptc-card-wrapper>
+            </div>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+
+            <hr>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+
+            <div class="is-grid">
+                <ptc-media-card class="is-col-4" active-background-image="@Html.Raw(bgImage2)"
+                    hover-background-image="@Html.Raw(video)" heading="Title ~10 words/70 characters max"
+                    category="Supporting Copy ~150 characters Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
+                    card-href="@url" target="@target">
+                    <h3 slot="seo-content">Title ~10 words/70 characters max</h3>
+                    <h4 slot="seo-content">Supporting Copy ~150 characters Lorem ipsum dolor sit amet, consectetur
+                        adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </h4>
+                </ptc-media-card>
+            </div>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+
+            <hr>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+            <sequential-bundle-example>
+                
+                <h3 slot='seo-content'>iWarranty Business Update Webinar</h3>
+                <p slot='seo-content'>The Leading Warranty & Contract Management System just got even better...
+                    iWarranty
+                    v5.3 now available!</p>
+                <h3 slot='seo-content'>iWarranty Business Update Webinar</h3>
+                <p slot='seo-content'>The Leading Warranty & Contract Management System just got even better...
+                    iWarranty
+                    v5.3 now available!</p>
+                <h3 slot='seo-content'>iWarranty Business Update Webinar</h3>
+                <p slot='seo-content'>The Leading Warranty & Contract Management System just got even better...
+                    iWarranty
+                    v5.3 now available!</p>
+                <h3 slot='seo-content'>iWarranty Business Update Webinar</h3>
+                <p slot='seo-content'>The Leading Warranty & Contract Management System just got even better...
+                    iWarranty
+                    v5.3 now available!</p>
+                <h3 slot='seo-content'>iWarranty Business Update Webinar</h3>
+                <p slot='seo-content'>The Leading Warranty & Contract Management System just got even better...
+                    iWarranty
+                    v5.3 now available!</p>
+            </sequential-bundle-example>
+            <br>
+            <hr>
+            <br>
+            
+            <ptc-embedded-quiz 
+                get-quiz-endpoint="https://www-dev.ptc.com/en/SmartbeansArea/EmbeddedQuiz/GetQuiz?modelid=2BFF92C7-AF0E-407B-848B-C502C32F80EB">
+                <h2 slot="seo-content">
+                    Discover which Vuforia augmented reality offering meets your business needs
+                </h2>
+                <h3 slot="seo-content">
+                    Vuforia AR content creation tools address key use cases across the enterprise
+                </h3>
+                <p slot="seo-content">
+                    Whether you’re seeking to address the skills gap, streamline manufacturing processes, improve
+                    training
+                    and service efficiency, or customize marketing and sales efforts—this short quiz will help you
+                    determine
+                    which Vuforia industrial augmented reality solution is the best fit for your use case.
+                </p>
+            </ptc-embedded-quiz>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+
+            <hr>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+            <div class="is-grid">
+                <div class="is-col-3-xl is-col-6">
+                    <div class="cta-link-item">
+                        <ptc-card card-type="simple-card" card-href="@Html.Raw(url)" heading="Tile title ~30 characters"
+                            heading-transform="@showTitle"
+                            styles="h3.ptc-h3 { font-weight: var(--ptc-font-weight-extrabold) !important;}">
+                            <h3 slot="seo-content"> Tile title ~30 characters </h3>
+                            <ptc-para slot="slot-description" font-size="xx-small" font-weight="w-6"
+                                seo-compatibility-mode>
+                                <p>Tile Supporting Copy ~450 characters - Lorem ipsum dolor sit amet, consectetur
+                                    adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                                </p>
+                            </ptc-para>
+                        </ptc-card>
+                    </div>
+                </div>
+            </div>
+
+            <div class="is-grid">
+                <div class="is-col-6">
+                    <ptc-card 
+                        styles=":host(.lottie-card) { background:white; border-radius: 10px; } :host(.lottie-card) .card-border { height: 100% } :host(.lottie-card) .link-wrapper { height: 100% } :host(.lottie-card) .card-media { display: flex; min-width: 280px; justify-content: center; align-items: center; } :host { height: 100% }"
+                        has-image="true" card-type="lottie-card" card-href="@url" heading="Tile title ~30 characters">
+                        <h3 slot="seo-content">
+                            Tile title ~30 characters
+                        </h3>
+                        <ptc-picture slot="slot-image" alt="image-test" is-full-width="true"
+                            src="https://placehold.co/500x500">
+                        </ptc-picture>
+                        <ptc-spacer slot="slot-description" breakpoint="small" direction="vertical"
+                            size="large"></ptc-spacer>
+                        <ptc-spacer slot="slot-description" breakpoint="x-small" direction="vertical"
+                            size="large"></ptc-spacer>
+                        <div slot="slot-description">
+                            <p>
+                                Tile Supporting Copy ~150 characters - Lorem ipsum dolor sit amet, consectetur
+                                adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            </p>
+                        </div>
+                    </ptc-card>
+                </div>
+            </div>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+
+            <hr>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+            <div class="is-grid">
+                <div class="is-col is-col-6-md is-col-4-lg">
+                    <ptc-bio-card name="Name: 30 character max" job-title="Job title: 40 character max"
+                        image="https://placehold.co/370x550" twitter="@TwitterURL" linkedin="@LinkedInURL">
+                        <h3 slot="seo-content">Name: 30 character max</h3>
+                        <p slot="seo-content">Job title: 40 character max</p>
+                        <div class="bio-modal-open-content">
+                            
+                        </div>
+                    </ptc-bio-card>
+                </div>
+            </div>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+            <hr>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+            <div class="is-grid">
+                <div class="is-col is-col-6">
+                    <ptc-card id="modal-card-1" card-href="javascript:void()" card-type="horizontal-card"
+                        has-image="true" heading="Title ~5 words/30 characters">
+                        <ptc-picture slot="slot-image" alt="test" is-full-width="true"
+                            src="https://placehold.co/510x340"></ptc-picture>
+                        <h3 slot="seo-content">Title ~5 words/30 characters</h3>
+                        <div class="" slot="slot-description">
+                            <ptc-para font-size="xx-small" para-line-h="line-height-dense" para-margin="margin-flush"
+                                seo-compatibility-mode>
+                                <p>Supporting Copy ~150 characters</p>
+                            </ptc-para>
+                        </div>
+                    </ptc-card>
+                </div>
+            </div>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+            <hr>
+            <ptc-spacer breakpoint="" direction="vertical" size="medium"></ptc-spacer>
+            <div class="is-grid">
+                <div class="is-col-4">
+                    <ptc-square-card number="220,000" arrow-direction="up" class="full-span-value-prop-square">
+                        <h3 slot="seo-content">45% manufacturing workload</h3>
+                        <p slot="seo-content">
+                            will be in the cloud within two years will be in the cloud within two years will be in the
+                            cloud within two years will be in the cloud within two years will be in the cloud
+                        </p>
+                        <div slot="before-icon">
+                            45% manufacturing workload
+                        </div>
+                        <div slot="after-icon">
+                            will be in the cloud within two years will be in the cloud within two years will be in the
+                            cloud within two years will be in the cloud within two years will be in the cloud
+                        </div>
+                    </ptc-square-card>
+                </div>
+            </div>
+        </div>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Sequential Slider/preview.stories.js

@@ -0,0 +1,38 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Sequential Slider'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-preloader-section section-type="ppc-skeleton" auto-show="false">
+        <div class="ptc-container ptc-section-standard light-links">
+            <sequential-bundle-example>
+                
+                <h3 slot='seo-content'>iWarranty Business Update Webinar dddd</h3>
+                <p slot='seo-content'>  AR training helps frontline workers ensure that
+                   <a href="/en/resources/augmented-reality-on-demand/implementing-ar-for-training">medical devices</a>
+                   are operating properly and receiving quality service.</p>
+                <h3 slot='seo-content'>iWarranty Business Update Webinar</h3>
+                <p slot='seo-content'>The Leading Warranty & Contract Management System just got even better... iWarranty
+                    v5.3 now available!</p>
+                <h3 slot='seo-content'>iWarranty Business Update Webinar</h3>
+                <p slot='seo-content'>The Leading Warranty & Contract Management System just got even better... iWarranty
+                    v5.3 now available!</p>
+                <h3 slot='seo-content'>iWarranty Business Update Webinar</h3>
+                <p slot='seo-content'>The Leading Warranty & Contract Management System just got even better... iWarranty
+                    v5.3 now available!</p>
+                <h3 slot='seo-content'>iWarranty Business Update Webinar</h3>
+                <p slot='seo-content'>The Leading Warranty & Contract Management System just got even better... iWarranty
+                    v5.3 now available!</p>
+            </sequential-bundle-example>
+        </div>
+    </ptc-preloader-section>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Sequential Slider Mobile/preview.stories.js

@@ -0,0 +1,90 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Sequential Slider Mobile'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        .swiper-slide {
+            display: flex;
+            justify-content: center;
+        }
+    </style>
+<div class="swiper-container swiper mobile-container">
+        <div class="swiper-wrapper">
+            <div class="swiper-slide">
+                <ptc-dynamic-card card-type="sequential" card-title="iWarranty Business Update Webinar"
+                    card-img-src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+                    card-img-alt="image-test">
+                    <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-color="white"
+                        para-line-h="line-height-p">
+                        The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now
+                        available!
+                    </ptc-para>
+                    <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
+                    <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">Learn
+                        More1
+                    </ptc-button>
+                </ptc-dynamic-card>
+            </div>
+            <div class="swiper-slide">
+                <ptc-dynamic-card card-type="sequential" card-title="iWarranty Business Update Webinar"
+                    card-img-src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+                    card-img-alt="image-test">
+                    <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-color="white"
+                        para-line-h="line-height-p">
+                        The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now
+                        available!
+                    </ptc-para>
+                    <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
+                    <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">Learn
+                        More2
+                    </ptc-button>
+                </ptc-dynamic-card>
+            </div>
+            <div class="swiper-slide">
+                <ptc-dynamic-card card-type="sequential" card-title="iWarranty Business Update Webinar"
+                    card-img-src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+                    card-img-alt="image-test">
+                    <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-color="white"
+                        para-line-h="line-height-p">
+                        The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now
+                        available!
+                    </ptc-para>
+                    <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
+                    <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">Learn
+                        More3
+                    </ptc-button>
+                </ptc-dynamic-card>
+            </div>
+        </div>
+        
+        <div class="swiper-pagination"></div>
+    </div>
+
+    <script>
+        const dynamicCards = document.querySelectorAll('ptc-dynamic-card');
+        
+        window.onload = () => {
+            dynamicCards.forEach(card => card.changeState('mobile'));
+            var swiper = new Swiper('.swiper-container', {
+                slidesPerView: 'auto',
+                // Enable pagination
+                pagination: {
+                    el: '.swiper-pagination',
+                    clickable: true
+                }
+            });
+        }
+    </script>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Shortform Agileworx/preview.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Shortform Agileworx'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-form id="myForm"></ptc-form>
+<script>
+      const myForm = document.getElementById('myForm');
+      myForm.addEventListener('formSubmit', (event) => {
+        const formData = event.detail;
+        console.olog('Form submitted: ', formData)
+      })
+    </script>
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Storefront Enhanced Product Listing/preview.stories.js

@@ -0,0 +1,132 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Storefront Enhanced Product Listing'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+            .enhanced-product-listing-title {
+                color: var(--color-gray-10, #323B42);
+                font-family: Raleway;
+                margin-top: 0;
+                margin-bottom: 16px;
+            }
+
+            .enhanced-product-listing-description {
+                color: var(--color-gray-10, #323B42);
+                font-family: Raleway;
+                font-size: 18px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 27px;
+                margin-bottom: 36px;
+            }
+
+            storefront-enhanced-product-list-example h3 {
+                margin: 0 0 8px 0;
+            }
+
+            storefront-enhanced-product-list-example .rich-text-description {
+                color: var(--color-gray-10);
+                font-family: Raleway;
+                font-size: 16px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 24px;
+                margin-bottom: 0;
+            }
+        </style>
+<div class="ptc-section-standard">
+            <div class="ptc-container">
+                <h2 class="enhanced-product-listing-title">
+                    Kepware Suites
+                </h2>
+                <max-width-container breakpoint="992" content-align="left" max-width="768">
+                    <p class="enhanced-product-listing-description">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices tincidunt sollicitudin. Nulla a magna erat. Etiam consequat egestas.
+                    </p>
+                </max-width-container>
+
+                <storefront-enhanced-product-list-example>
+                    <div class="swiper-slide">
+                        <ptc-enhanced-product-listing-card card-index="0">
+                            <span slot="ribbon-text">Best Value</span>
+                            <h3 slot="heading">Card 1</h3>
+                            <p class="rich-text-description" slot="description">
+                                The Manufacturing Suite contains the largest collection of manufacturing-based device drivers available, including more than 100 protocols commonly used in the Manufacturing Industry.
+                            </p>
+                            <span slot="feature-callout-1">100+ drivers included</span>
+                            <span slot="feature-callout-2">Seamless connectivity to leading automation equipment manufacturers</span>
+                            <span slot="feature-callout-3">Scalable to hundreds of protocols, thousands of devices, and millions of data points</span>
+                            <span slot="pricing-label">from</span>
+                            <span slot="pricing-value">$999</span>
+                            <a slot="cta" href="https://www.ptc.com" title="Lorem Ipsum" target="_self">Lorem Ipsum</a>
+                        </ptc-enhanced-product-listing-card>
+                    </div>
+                    <div class="swiper-slide">
+                        <ptc-enhanced-product-listing-card card-index="1">
+                            <span slot="ribbon-text">Featured</span>
+                            <h3 slot="heading">Card 2</h3>
+                            <p class="rich-text-description" slot="description">
+                                The Manufacturing Suite contains the largest collection of manufacturing-based device drivers available, including more than 100 protocols commonly used in the Manufacturing Industry.
+                            </p>
+                            <span slot="feature-callout-1">100+ drivers included</span>
+                            <span slot="feature-callout-2">Seamless connectivity to leading automation equipment manufacturers</span>
+                            <span slot="pricing-label">from</span>
+                            <span slot="pricing-value">$999</span>
+                            <a slot="cta" href="https://www.ptc.com" title="Lorem Ipsum" target="_self">Lorem Ipsum</a>
+                        </ptc-enhanced-product-listing-card>
+                    </div>
+                    <div class="swiper-slide">
+                        <ptc-enhanced-product-listing-card card-index="2">
+                            <span slot="ribbon-text">Best Value</span>
+                            <h3 slot="heading">Card 3</h3>
+                            <p class="rich-text-description" slot="description">
+                                The Manufacturing Suite contains the largest collection of manufacturing-based device drivers available, including more than 100 protocols commonly used in the Manufacturing Industry.
+                            </p>
+                            <span slot="pricing-label">from</span>
+                            <span slot="pricing-value">$999</span>
+                            <a slot="cta" href="https://www.ptc.com" title="Lorem Ipsum" target="_self">Lorem Ipsum</a>
+                        </ptc-enhanced-product-listing-card>
+                    </div>
+                    <div class="swiper-slide">
+                        <ptc-enhanced-product-listing-card card-index="3">
+                            <span slot="ribbon-text">Featured</span>
+                            <h3 slot="heading">Card 4</h3>
+                            <p class="rich-text-description" slot="description">
+                                The Manufacturing Suite contains the largest collection of manufacturing-based device drivers available, including more than 100 protocols commonly used in the Manufacturing Industry.
+                            </p>
+                            <span slot="feature-callout-1">100+ drivers included</span>
+                            <span slot="feature-callout-2">Seamless connectivity to leading automation equipment manufacturers</span>
+                            <span slot="feature-callout-3">Scalable to hundreds of protocols, thousands of devices, and millions of data points</span>
+                            <span slot="pricing-label">from</span>
+                            <span slot="pricing-value">$999</span>
+                            <a slot="cta" href="https://www.ptc.com" title="Lorem Ipsum" target="_self">Lorem Ipsum</a>
+                        </ptc-enhanced-product-listing-card>
+                    </div>
+                    <div class="swiper-slide">
+                        <ptc-enhanced-product-listing-card card-index="4">
+                            <span slot="ribbon-text">Best Value</span>
+                            <h3 slot="heading">Card 5</h3>
+                            <p class="rich-text-description" slot="description">
+                                The Manufacturing Suite contains the largest collection of manufacturing-based device drivers available, including more than 100 protocols commonly used in the Manufacturing Industry.
+                            </p>
+                            <span slot="feature-callout-1">100+ drivers included</span>
+                            <span slot="feature-callout-2">Seamless connectivity to leading automation equipment manufacturers</span>
+                            <span slot="feature-callout-3">Scalable to hundreds of protocols, thousands of devices, and millions of data points</span>
+                            <span slot="pricing-label">from</span>
+                            <span slot="pricing-value">$999</span>
+                            <a slot="cta" href="https://www.ptc.com" title="Lorem Ipsum" target="_self">Lorem Ipsum</a>
+                        </ptc-enhanced-product-listing-card>
+                    </div>
+                </storefront-enhanced-product-list-example>
+            </div>
+        </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();