@ptcwebops/ptcw-design 6.3.59-beta → 6.3.60-beta

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

@@ -0,0 +1,205 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Plm On Demand 1'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        .demo-height {
+            min-height: 330px;
+        }
+
+        @media (min-width: 767px) {
+            .demo-height {
+                min-height: 430px;
+            }
+        }
+    </style>
+<div class="example background-plm-grey">
+        
+        <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="u-hero-width is-grid  has-row-gap-sm">
+              <ptc-breadcrumb class="is-col-12">
+                <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>
+              <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="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="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="is-col-12">
+                See how Polaris and  <a href="#">Whirlpool Corporation are driving digital</a> transformation and industrial innovation for
+                their customers.
+              </ptc-para>
+              <ptc-link class="has-m-top is-col-12" href="https://www.ptc.com" link-title="PTC" theme="d-green-underline" dark dark-focus-state>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>
+        
+        <div class="ptc-container-lg u-hero-pushup">
+          <div class="is-grid">
+            
+            <div class="is-col-12">
+              <ptc-title type="h2" upperline="no-upperline" is-plm-hub title-size="x-large" title-weight="w-8" title-l-height="lh-28">Most Popular</ptc-title>
+            </div>
+            <div class="is-col-12 is-grid has-col-12 has-col-5-xxl">
+              <ptc-card-wrapper card-type="card-video" class="is-col-6 is-col-4-md is-col-3-xl is-col-1-xxl"
+                card-link="https://www.ptc.com" link-title="ptc">
+                <ptc-card-content card-type="card-video">
+                  <ptc-picture alt="image-test" border-radius="radius-large" is-full-height is-full-width
+                    src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data">
+                  </ptc-picture>
+                </ptc-card-content>
+                <ptc-card-bottom card-type="card-video">
+                  <ptc-para font-size="x-small" font-weight="w-7" para-line-h="line-height-19" para-color="white" para-margin="margin-top-3">
+                    3 Reasons Why Engineering and Manufacturing are Disjointed
+                  </ptc-para>
+                </ptc-card-bottom>
+              </ptc-card-wrapper>
+              <ptc-card-wrapper card-type="card-video" class="is-col-6 is-col-4-md is-col-3-xl is-col-1-xxl"
+                card-link="https://www.ptc.com" link-title="ptc">
+                <ptc-card-content card-type="card-video">
+                  <ptc-picture alt="image-test" border-radius="radius-large" is-full-height is-full-width
+                    src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data">
+                  </ptc-picture>
+                </ptc-card-content>
+                <ptc-card-bottom card-type="card-video">
+                  <ptc-para font-size="x-small" font-weight="w-7" para-line-h="line-height-19" para-color="white" para-margin="margin-top-3">
+                    5 Digital Transformation Trends CIOs Should Care About
+                  </ptc-para>
+                </ptc-card-bottom>
+              </ptc-card-wrapper>
+            </div>
+            
+            <div class="is-col-12">
+              <ptc-title type="h2" upperline="no-upperline" is-plm-hub title-size="large" title-weight="w-8" title-l-height="lh-28">Latest Event: PLM Innovations</ptc-title>
+            </div>
+            <div class="is-col-12 is-grid has-col-12 has-col-5-xxl ">
+              <ptc-card-wrapper card-type="card-tall" class="is-col-6 is-col-4-md is-col-3-xl is-col-1-xxl">
+                <ptc-card-content card-type="card-tall">
+                  <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+                    src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" 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="medium" title-weight="w-8" title-l-height="lh-23">
+                    Collaborative Approach Between Design and Manufacturing
+                  </ptc-title>
+                </ptc-card-bottom>
+              </ptc-card-wrapper>
+              <ptc-card-wrapper card-type="card-tall" class="is-col-6 is-col-4-md is-col-3-xl is-col-1-xxl">
+                <ptc-card-content card-type="card-tall">
+                  <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+                  src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+                    <ptc-overlay filter-color="blue" 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="blue" is-plm-hub title-size="medium" title-weight="w-8" title-l-height="lh-23">
+                    Manufacturing Process Planning at Polaris
+                  </ptc-title>
+                </ptc-card-bottom>
+              </ptc-card-wrapper>
+            </div>
+            
+            <div class="is-col-12 is-grid">
+              <ptc-card-wrapper card-type="speed-bump" class="is-col-12">
+                <ptc-card-content card-type="speed-bump">
+                  <div class="is-grid has-no-col-gap has-no-row-gap">
+                    <div class="is-col-12 is-row-1 is-col-9-md">
+                      <ptc-para font-size="large" font-weight="w-8" para-margin="margin-flush" para-color="white">
+                        Leaders Use PLM to Drive Innovation
+                      </ptc-para>
+                      <ptc-para font-size="small" font-weight="w-5" para-margin="margin-flush" para-color="white"
+                        para-line-h="line-height-19">
+                        See how global manufacturers are effectively using PLM to drive their digital transformation
+                        journey.
+                      </ptc-para>
+                      <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+                      <ptc-spacer breakpoint="small" size="xx-small"></ptc-spacer>
+                    </div>
+                    <div class="is-col-12 is-row-1 is-col-3-md u-justify-self-end">
+                      <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank"
+                        class="has-m-top">
+                        Learn More
+                      </ptc-button>
+                    </div>
+                  </div>
+                </ptc-card-content>
+              </ptc-card-wrapper>
+            </div>
+            
+            <div class="is-col-12">
+              <ptc-title type="h2" upperline="no-upperline" is-plm-hub title-size="large" title-weight="w-8" title-l-height="lh-28">Learning Windchill</ptc-title>
+            </div>
+            <ptc-card-wrapper card-type="card-wide" class="is-col-12 is-col-6-sm">
+              <ptc-card-content card-type="card-wide">
+                <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+                  src="http://s7d1.scene7.com/is/image/ptcinc/slts-access-real-time-data-service-compliance" size-xs="800x450" size-md="800x450"
+                  size-md="1366x500" size-lg="1920x500">
+                  <ptc-overlay filter-color="red" border-radius="radius-large"></ptc-overlay>
+                </ptc-picture>
+              </ptc-card-content>
+              <ptc-card-bottom card-type="card-wide">
+                <ptc-title type="h3" upperline="no-upperline" title-shadow="red" is-plm-hub title-size="medium" title-weight="w-8" title-l-height="lh-23">
+                  Collaborative Approach Between Design and Manufacturing
+                </ptc-title>
+              </ptc-card-bottom>
+            </ptc-card-wrapper>
+            <ptc-spacer breakpoint="x-small" size="small"></ptc-spacer>
+            <ptc-spacer breakpoint="small" size="small"></ptc-spacer>
+          </div>
+        </div>
+        
+        <ptc-hero hero-type="footer-cta" bg-url="https://s7d1.scene7.com/is/image/ptcinc/slts-access-real-time-data-service-compliance">
+          <div class="ptc-container is-grid">
+            <div class="u-hero-width u-margin-center is-col-12 is-grid has-row-gap-sm">
+              <ptc-span class="is-col-12" span-style="plm-hub-style" display="block" exportparts="part-ptc-span">Featured
+                Video</ptc-span>
+              <ptc-title class="is-col-12" type="h2" upperline="no-upperline" text-align="center" is-plm-hub title-size="xxxx-large" title-weight="w-8">Making
+                Industrial
+                Innovation a
+                Reality</ptc-title>
+              <ptc-para class="is-col-12" font-size="x-small" font-weight="w-5" para-margin="margin-flush" para-color="white"
+                para-line-h="line-height-19">
+                See how Polaris <a href="#">and Whirlpool Corporation are driving digital transformation</a> and industrial innovation for
+                their customers.
+              </ptc-para>
+              <ptc-link class="has-m-top is-col-12" href="https://www.ptc.com" link-title="PTC" theme="d-green-underline" >Watch
+                Now
+              </ptc-link>
+              <div class="is-col-12">
+                <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+                <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+              </div>
+            </div>
+          </div>
+        </ptc-hero>
+      </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

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

@@ -0,0 +1,180 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Plm On Demand 2'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        .demo-height {
+            min-height: 330px;
+        }
+
+        @media (min-width: 767px) {
+            .demo-height {
+                min-height: 430px;
+            }
+        }
+    </style>
+<div class="example background-plm-grey">
+    <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+    <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+    <div class="ptc-container-lg">
+      <div class="is-grid">
+        <div class="grid-left is-col-12 is-col-8-lg">
+          <div class="dummpy-video-player">
+            
+            <ptc-picture alt="image-test"
+              src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"></ptc-picture>
+            
+          </div>
+          <ptc-card-wrapper card-type="card-video-intro" class="background-grey-10 has-p-md">
+            <ptc-card-content card-type="card-video-intro">
+              <ptc-title type="h3" upperline="no-upperline" is-plm-hub title-size="medium" title-weight="w-8" title-l-height="lh-23">
+                Collaborative Approach Between Design and Manufacturing
+              </ptc-title>
+              <ptc-date date-color="white" year="2021" month="8" day="15" country="de-DE" data-size="medium" class="has-m-bottom-md"></ptc-date>
+              <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-bottom-1" para-color="white"
+                para-line-h="line-height-19">
+                See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation
+                for
+                their customers.
+              </ptc-para>
+            </ptc-card-content>
+            <ptc-card-bottom card-type="card-video-intro">
+              <div class="is-flex">
+                <ptc-social-share class="has-m-left" display="inline-block" share-type="mail" text="summary" url="https://www.ptc.com" share-title="title goes here" source="linkedin source" recipient="yqiantest@ptc.com"></ptc-social-share>
+                <ptc-social-share class="has-m-left" display="inline-block" share-type="linkedin" text="summary" url="https://www.ptc.com" share-title="title goes here" source="linkedin source" recipient="yqiantest@ptc.com"></ptc-social-share>
+                <ptc-social-share class="has-m-left" display="inline-block" share-type="twitter" text="summary" url="https://www.ptc.com" share-title="title goes here" source="linkedin source" recipient="yqiantest@ptc.com"></ptc-social-share>
+                <ptc-social-share class="has-m-left" display="inline-block" share-type="facebook" text="summary" url="https://www.ptc.com" share-title="title goes here" source="linkedin source" recipient="yqiantest@ptc.com"></ptc-social-share>
+              </div>
+            </ptc-card-bottom>
+          </ptc-card-wrapper>
+          <div class="card-wrapper is-grid has-m-top-lg">
+            <ptc-card-wrapper card-type="card-2up" class="is-col-6" card-link="https://www.ptc.com" link-title="ptc">
+              <ptc-card-content card-type="card-2up">
+                <ptc-picture alt="image-test" border-radius="radius-large" is-full-height
+                  src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" size-xs="800x450" size-md="800x450" 
+                  size-md="1366x500" size-lg="1920x500">
+                  <ptc-overlay filter-color="green" border-radius="radius-large"></ptc-overlay>
+                </ptc-picture>
+              </ptc-card-content>
+              <ptc-card-bottom card-type="card-2up">
+                <ptc-title type="h3" upperline="no-upperline" is-plm-hub title-size="medium" title-weight="w-8" title-l-height="lh-23">
+                  Collaborative Approach Between Design and Manufacturing
+                </ptc-title>
+              </ptc-card-bottom>
+            </ptc-card-wrapper>
+            <ptc-card-wrapper card-type="card-2up" class="is-col-6" card-link="https://www.ptc.com" link-title="ptc">
+              <ptc-card-content card-type="card-2up">
+                <ptc-picture alt="image-test" border-radius="radius-large" is-full-height
+                  src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" size-xs="800x450" size-md="800x450" 
+                  size-md="1366x500" size-lg="1920x500">
+                  <ptc-overlay filter-color="blue" border-radius="radius-large"></ptc-overlay>
+                </ptc-picture>
+              </ptc-card-content>
+              <ptc-card-bottom card-type="card-2up">
+                <ptc-title type="h3" upperline="no-upperline" is-plm-hub title-size="medium" title-weight="w-8" title-l-height="lh-23">
+                  Manufacturing Process Planning at Polaris
+                </ptc-title>
+              </ptc-card-bottom>
+            </ptc-card-wrapper>
+          </div>
+        </div>
+        <div class="grid-right is-col-12 is-col-4-lg">
+          
+           <ptc-card-wrapper card-type="speed-bump" class="is-col-12">
+            <ptc-card-content card-type="speed-bump-2">
+              <div class="is-grid has-no-col-gap has-row-gap-sm">
+                <ptc-title class="is-col-12" type="h2" upperline="no-upperline" is-plm-hub title-size="medium" title-weight="w-8" title-l-height="lh-23">
+                  Leaders Use PLM to Drive Innovation
+                </ptc-title>
+                <ptc-para class="is-col-12" font-size="xx-small" font-weight="w-5" para-margin="margin-flush" para-color="white" para-line-h="line-height-19">
+                  See how global manufacturers are effectively using PLM to drive their digital transformation journey.
+                </ptc-para>
+                <ptc-link class="is-col-12 has-m-top-sm" href="https://www.ptc.com" link-title="PTC" theme="arrow-plm" font-size="small">
+                  Watch Now
+                </ptc-link>
+              </div>
+            </ptc-card-content>
+          </ptc-card-wrapper>
+          
+          <ptc-para font-size="x-small" font-weight="w-8" para-margin="margin-3" para-color="white">Related Video
+          </ptc-para>
+          <div class="is-grid has-row-gap-md">
+            <ptc-card-wrapper class="is-col-12 is-col-6-sm is-col-12-lg" card-type="card-playlist" card-link="https://www.ptc.com"
+              link-title="ptc">
+              <ptc-card-content card-type="card-playlist">
+                <ptc-picture alt="image-test" border-radius="radius-large"
+                  src="http://s7d1.scene7.com/is/image/ptcinc/slts-optimize-product-design-female-engineers"
+                  size-xs="200x200" size-sm="200x200" size-md="200x200" size-lg="200x200" width="112"></ptc-picture>
+              </ptc-card-content>
+              <ptc-card-bottom card-type="card-playlist">
+                <ptc-para font-size="xx-small" font-weight="w-6" para-margin="margin-flush" para-color="white"
+                  para-line-h="line-height-17">
+                  See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation
+                  for
+                  their customers.
+                </ptc-para>
+              </ptc-card-bottom>
+            </ptc-card-wrapper>
+            <ptc-card-wrapper class="is-col-12 is-col-6-sm is-col-12-lg" card-type="card-playlist" card-link="https://www.ptc.com"
+              link-title="ptc">
+              <ptc-card-content card-type="card-playlist">
+                <ptc-picture alt="image-test" border-radius="radius-large"
+                  src="http://s7d1.scene7.com/is/image/ptcinc/slts-optimize-product-design-female-engineers"
+                  size-xs="200x200" size-sm="200x200" size-md="200x200" size-lg="200x200" width="112"></ptc-picture>
+              </ptc-card-content>
+              <ptc-card-bottom card-type="card-playlist">
+                <ptc-para font-size="xx-small" font-weight="w-6" para-margin="margin-flush" para-color="white"
+                  para-line-h="line-height-17">
+                  See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation
+                  for
+                  their customers.
+                </ptc-para>
+              </ptc-card-bottom>
+            </ptc-card-wrapper>
+            <ptc-card-wrapper class="is-col-12 is-col-6-sm is-col-12-lg" card-type="card-playlist">
+              <ptc-card-content card-type="card-playlist">
+                <ptc-picture alt="image-test" border-radius="radius-large"
+                  src="http://s7d1.scene7.com/is/image/ptcinc/slts-optimize-product-design-female-engineers"
+                  size-xs="200x200" size-sm="200x200" size-md="200x200" size-lg="200x200" width="112"></ptc-picture>
+              </ptc-card-content>
+              <ptc-card-bottom card-type="card-playlist">
+                <ptc-para font-size="xx-small" font-weight="w-6" para-margin="margin-flush" para-color="white"
+                  para-line-h="line-height-17">
+                  See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation
+                  for
+                  their customers.
+                </ptc-para>
+              </ptc-card-bottom>
+            </ptc-card-wrapper>
+            <ptc-card-wrapper class="is-col-12 is-col-6-sm is-col-12-lg" card-type="card-playlist">
+              <ptc-card-content card-type="card-playlist">
+                <ptc-picture alt="image-test" border-radius="radius-large"
+                  src="http://s7d1.scene7.com/is/image/ptcinc/slts-optimize-product-design-female-engineers"
+                  size-xs="200x200" size-sm="200x200" size-md="200x200" size-lg="200x200" width="112"></ptc-picture>
+              </ptc-card-content>
+              <ptc-card-bottom card-type="card-playlist">
+                <ptc-para font-size="xx-small" font-weight="w-6" para-margin="margin-flush" para-color="white"
+                  para-line-h="line-height-17">
+                  See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation
+                  for
+                  their customers.
+                </ptc-para>
+              </ptc-card-bottom>
+            </ptc-card-wrapper>
+          </div>
+        </div>
+        <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+        <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+      </div>
+    </div>
+  </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Podcast List/preview.stories.js

@@ -0,0 +1,175 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Podcast List'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-jumbotron jumbotron-type="dark"
+    sub-title="totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
+    bg-src="https://www.ptc.com/-/media/Images/new-org/1920x500/Digital-Manufacturing/Header-Increase-OEE-1920x500.jpg?h=500&w=1920&la=en&hash=EBD7026CF9A9186AFD98050BF2055750">
+    
+    
+    <ptc-breadcrumb slot="breadcrumb" color="white">
+      <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="light-gray">
+        PLM Video Hub
+      </list-item>
+      <list-item list-type="breadcrumb" color="light-gray">
+        Current Page
+      </list-item>
+    </ptc-breadcrumb>
+    <ptc-title slot="main-title" type="h1" upperline="no-upperline" title-size="xxxx-large" title-height="densest"
+      title-weight="w-8" title-margin="margin-flush" text-align="left" title-color="gray-1">Sed ut perspiciatis unde
+      omnis iste natus
+    </ptc-title>
+    <ptc-button slot="j-cta" type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank">
+      CTA 1
+    </ptc-button>
+    <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">
+      CTA 2
+    </ptc-button>
+  </ptc-jumbotron>
+
+  
+  <div class="ptc-section">
+    <ptc-text-copy-with-background image-alt-text="undefined"
+      background-image="https://www.ptc.com/-/media/Images/new-org/1366x500/podcast/Episode1-1366x500.jpg"
+      is-background-blur="false" overlay="false" slit-position="top-right" top-slit-background-color="transparent"
+      type="text-copy-with-background">
+      <div class="ptc-container light-links">
+        <div class="is-grid">
+          <div class="is-col is-col-9-lg">
+            <ptc-span display="block" font-weight="w-4" span-style="plm-hub-style">Episode 17 with Kyle Carreau and
+              Emily Griffin</ptc-span>
+            <ptc-spacer size="medium"></ptc-spacer>
+            <ptc-title title-color="white" type="h2" text-align="left" upperline="no-upperline"
+              title-margin="margin-flush" title-size="xx-large">Remote configuration and Troubleshooting with Emily
+              Griffin </ptc-title>
+            <ptc-spacer size="large"></ptc-spacer>
+            <div id="buzzsprout-player-11993596"></div>
+            <script 
+              src="https://www.buzzsprout.com/1637608/11993596-remote-configuration-and-troubleshooting-with-emily-griffin.js?container_id=buzzsprout-player-11993596&player=small"
+              type="text/javascript" charset="utf-8"></script>
+            <ptc-spacer size="large"></ptc-spacer>
+
+            
+            <p style="color:#FFFFFF">Join Kyle Carreau as he speaks with Product Manager Emily Griffin around Kepware’s
+              newest SaaS based offering: Kepware+! The pair discuss the value and technical aspects of Kepware+, how
+              the product fits into the new Enterprise strategy, as well as future looking aspects of Kepware+.</p>
+            <br>
+            <p class="podcast-cta-section">
+              <a href="https://www.buzzsprout.com/1637608/10627971-an-international-perspective-part-1-with-hector-garcia"
+                class="btn btn-primary btn-margin podcast-share-facebook">
+                Facebook
+              </a>
+              <a href="https://www.buzzsprout.com/1637608/10627971-an-international-perspective-part-1-with-hector-garcia"
+                class="btn btn-primary btn-wrapfix btn-transparent btn-margin podcast-share-twitter">
+                Twitter
+              </a>
+              <a href="https://www.buzzsprout.com/1637608/10627971-an-international-perspective-part-1-with-hector-garcia"
+                class="btn btn-primary btn-wrapfix btn-transparent btn-margin podcast-share-linkedin">
+                LinkedIn
+              </a>
+            </p>
+            
+
+            
+          </div>
+        </div>
+      </div>
+    </ptc-text-copy-with-background>
+  </div>
+
+  
+
+  <div class="ptc-container   ptc-section">
+    <ptc-title type="h2" text-align="left" title-size="xx-large" title-color="gray" upperline="dotted"
+      title-display="inline-block" title-height="densest" title-margin="margin-flush" title-weight="w-8"
+      is-plm-hub="false">
+      Start at The Beginning:
+    </ptc-title>
+    <ptc-para font-size="small" font-weight="w-4" para-align="justify" para-color="primary-grey"
+      para-line-h="line-height-p" para-margin="margin-botton-4" para-z-index="z-1" styles="">Lorem ipsum
+      dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+      deserunt mollit anim id est laborum.</ptc-para>
+
+    <article>
+      <ptc-podcast-card heading="Culture driving innovation with Adam Kennedy"
+        image-src="https://www.ptc.com/-/media/Images/new-org/500x500/kepware-the-connected-podcast-500x500.jpg"
+        alt-text="kepware image">
+        <ptc-para font-size="x-small" font-weight="w-4" para-align="justify" para-color="primary-grey"
+          para-line-h="line-height-p" para-margin="margin-4" para-z-index="z-1" styles=""> Kyle Carreau
+          (Partner Enablement Engineer) sits down with Adam Kennedy (Global
+          Sales VP, Kepware Products) to discuss how the Kepware team has been able to continue to deliver quality
+          products and excellent <a href="#">customer service</a> throughout the years.</ptc-para>
+        <div id="buzzsprout-player-8099762"></div>
+        <script 
+          src="https://www.buzzsprout.com/1637608/8099762-culture-driving-innovation-with-adam-kennedy.js?container_id=buzzsprout-player-8099762&player=small"
+          type="text/javascript" charset="utf-8"></script>
+      </ptc-podcast-card>
+    </article>
+    <article>
+      <ptc-podcast-card heading="OPC UA and MQTT with Tom Gaudet"
+        image-src="https://www.ptc.com/-/media/Images/new-org/500x500/kepware-the-connected-podcast-500x500.jpg"
+        alt-text="kepware image">
+        <ptc-para font-size="x-small" font-weight="w-4" para-align="justify" para-color="primary-grey"
+          para-line-h="line-height-p" para-margin="margin-4" para-z-index="z-1" styles=""> Kyle Carreau
+          (Partner Enablement Engineer) sits down with Tom Gaudet (Product Management Lead, Kepware Products) to discuss
+          how the industry has adopted OPC UA and MQTT Protocols, as well as what the future of connectivity will look
+          like. </ptc-para>
+        <div id="buzzsprout-player-8143345"></div>
+        <script 
+          src="https://www.buzzsprout.com/1637608/8143345-opc-ua-and-mqtt-with-tom-gaudet.js?container_id=buzzsprout-player-8143345&player=small"
+          type="text/javascript" charset="utf-8"></script>
+      </ptc-podcast-card>
+    </article>
+    <article>
+      <ptc-podcast-card heading="Reflections on authenticity and sponsorship with Lori Beaulieu and Laurie Sirois"
+        image-src="https://www.ptc.com/-/media/Images/new-org/500x500/kepware-the-connected-podcast-500x500.jpg"
+        alt-text="kepware image">
+        <ptc-para font-size="x-small" font-weight="w-4" para-align="justify" para-color="primary-grey"
+          para-line-h="line-height-p" para-margin="margin-4" para-z-index="z-1" styles="">It's a Lori and
+          Laurie takeover! In this episode, Lori Beaulieu (Technical Product Owner - <a 
+            href="/en/products/kepware/thingworx-kepware-edge">ThingWorx Kepware Edge</a>, Edge Central) and Laurie
+          Sirois (Director of Quality Assurance) discuss their experiences as women in the technology field, differences
+          in communication styles, valuable lessons learned, and ways to help support women through
+          sponsorship.</ptc-para>
+        <div id="buzzsprout-player-8190163"></div>
+        <script 
+          src="https://www.buzzsprout.com/1637608/8190163-reflections-on-authenticity-sponsorship-with-lori-beaulieu-and-laurie-sirois.js?container_id=buzzsprout-player-8190163&player=small"
+          type="text/javascript" charset="utf-8"></script>
+      </ptc-podcast-card>
+    </article>
+
+    <article>
+      <ptc-podcast-card heading="Industrial security with Michael Furstenberg of waterfall security solutions"
+        image-src="https://www.ptc.com/-/media/Images/new-org/500x500/kepware-the-connected-podcast-500x500.jpg"
+        alt-text="kepware image">
+        <ptc-para font-size="x-small" font-weight="w-4" para-align="justify" para-color="primary-grey"
+          para-line-h="line-height-p" para-margin="margin-4" para-z-index="z-1" styles="">Kyle Carreau
+          (Partner Enablement Engineer) sits down with Michael Firstenberg (Director of Industrial Security, Waterfall
+          Security Solutions) to discuss the recent cyberattack on the Oldsmar, Florida water/waste water treatment
+          facility. The two also discuss the security challenges that come with the ever growing IoT landscape. Michael
+          also gives his recommendations on thinking about security first during the design phase, and gives a list of
+          resources to keep yourself and your company informed.
+        </ptc-para>
+
+        <div id="buzzsprout-player-8204650"></div>
+        <script 
+          src="https://www.buzzsprout.com/1637608/8204650-industrial-security-with-michael-firstenberg-of-waterfall-security-solutions.js?container_id=buzzsprout-player-8204650&player=small"
+          type="text/javascript" charset="utf-8"></script>
+      </ptc-podcast-card>
+    </article>
+
+  </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();