@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/Ptc Creo Start Page/preview.stories.js

@@ -0,0 +1,111 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Creo Start Page'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<section class="creo-logo u-bg-gray-02">
+    <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Images/new-org/icons/creo-parent-logo-grey.svg"
+      max-width="132" image-alignment="center" display-image="inline-block"
+      styles="img { padding: 20px 0; min-height: 44px; }"></ptc-picture>
+
+  </section>
+  <section class="creo-nav">
+    <div class="ptc-container">
+      <ptc-title type="h1" upperline="no-upperline" text-align="center" title-size="x-large" title-weight="w-7"
+        styles="h1{margin: 18px 0 0 0}">Lets's get started with Creo</ptc-title>
+      <ptc-nav-pills>
+        <a href="#." alt="">
+          <ptc-tooltip text-display="inline" max-length="35" z-index="z-2" description="Support"
+            position="bottom"></ptc-tooltip>
+        </a>
+        <a href="#." alt="">
+          <ptc-tooltip text-display="inline" max-length="35" z-index="z-2" description="Tutorials"
+            position="bottom"></ptc-tooltip> </a>
+        <a href="#." alt="">
+          <ptc-tooltip text-display="inline" max-length="35" z-index="z-2" description="Join The Community"
+            position="bottom"></ptc-tooltip> </a>
+        <a href="#." alt="">
+          <ptc-tooltip text-display="inline" max-length="35" z-index="z-2" description="Help Center"
+            position="bottom"></ptc-tooltip> </a>
+      </ptc-nav-pills>
+    </div>
+  </section>
+
+  <section class="u-bg-gray-02">
+    <div class="ptc-container">
+      <div class="is-grid creo-banner">
+        <div class="is-col-5-md is-col-6-lg  u-flex flex-align-items-center">
+          <div>
+            <ptc-spacer size="xxx-large"></ptc-spacer>
+            <ptc-title type="h2" upperline="no-upperline" title-size="x-large" title-margin="margin-flush"
+              title-weight="w-7" styles="">
+              <ptc-tooltip text-display="inline" max-length="75" description="[Webinar] Simulation-Led Design: Democratizing Simulation" position="bottom" width="default" zindex="z-auto" theme="standard" hide-on-mobile="false"></ptc-tooltip></ptc-title>
+            <ptc-para font-size="small" font-weight="w-4" para-line-h="line-height-p"
+              para-margin="margin-3">
+              <ptc-tooltip text-display="inline" max-length="170" description="Original air date: February 15, 2023 at 11AM" position="bottom" width="default" zindex="z-auto" theme="standard" hide-on-mobile="false"></ptc-tooltip>
+            </ptc-para>
+            <ptc-button type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank">Watch Now
+            </ptc-button>
+            <ptc-spacer size="xxx-large"></ptc-spacer>
+          </div>
+        </div>
+        <div class="is-col-7-md is-col-6-lg u-flex flex-align-items-center">
+          <div class="c-banner-wrap">
+            <ptc-img image-type="smart-img" img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway">
+            </ptc-img>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+  <div class="ptc-container">
+    <max-width-container max-width="967">
+      <div class="flex-grid-creo">
+      <ptc-card has-image="true" is-creo-card="true" card-type="listing-card" card-href="http://www.google.com" heading="Augmented Reality" max-chars="75" card-overflow="visible">
+        <ptc-img slot="slot-image" img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+        image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+        <div slot="slot-description">
+          <ptc-para font-size="small" font-weight="w-4" para-line-h="line-height-densest">
+            <ptc-tooltip text-display="inline" max-length="170" description="Digital technology is
+            constantly transforming how businesses engage with their customers and employees" position="bottom" width="default" zindex="z-999" theme="standard" hide-on-mobile="true"></ptc-tooltip>
+          </ptc-para>
+        </div>
+      </ptc-card>
+      <ptc-card has-image="true" is-creo-card="true" card-type="listing-card" card-href="http://www.google.com" heading="Augmented Reality" max-chars="75" card-overflow="visible">
+        <ptc-img slot="slot-image" img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+          image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+        <div slot="slot-description">
+          <ptc-para font-size="small" font-weight="w-4" para-line-h="line-height-densest">
+            <ptc-tooltip text-display="inline" max-length="170" description="Digital technology is
+            constantly transforming how businesses engage with their customers and employees" position="bottom" width="default" zindex="z-999" theme="standard" hide-on-mobile="true"></ptc-tooltip>
+          </ptc-para>
+        </div>
+      </ptc-card>
+      <ptc-card has-image="true" is-creo-card="true" card-type="listing-card" card-href="http://www.google.com" heading="Augmented Reality" max-chars="75" card-overflow="visible">
+        <ptc-img slot="slot-image" img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+          image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+        <div slot="slot-description">
+          <ptc-para font-size="small" font-weight="w-4" para-line-h="line-height-densest">
+            <ptc-tooltip text-display="inline" max-length="170" description="Digital technology is
+            constantly transforming how businesses engage with their customers and employees" position="bottom" width="default" zindex="z-999" theme="standard" hide-on-mobile="true"></ptc-tooltip>
+          </ptc-para>
+        </div>
+      </ptc-card>
+
+      <max-width-container max-width="743">
+        <ptc-para para-line-h="line-height-p" font-size="small" para-margin="margin-3"  para-z-index="z-auto" >Mathcad Express is limited to usage for personal purposes, and may not be used to benefit any business or for any commercial purposes. For more information please see the <a rel="noopener noreferrer" href="https://www.ptc.com/en/documents/legal-agreements/on-premise-license-agreements?_gl=1*1nb19b*_ga*MTQyMDUxNzk0LjE2ODY1ODE4Mzg.*_ga_1QBT6P6HR1*MTY4OTY5NzIwNi4zLjEuMTY4OTY5NzIyNy4wLjAuMA.." target="_blank">PTC Licensing Basis Table.</a></ptc-para>
+      </max-width-container>
+      </div>
+    </max-width-container>
+  </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Ptc Editorial/preview.stories.js

@@ -0,0 +1,84 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Editorial'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container ptc-section-standard">
+      <div class="is-grid has-col-gap-lg has-row-gap-lg column-gap-mobile">
+        <div class="is-col-12 is-col-3-xl">
+          <ptc-title type="h2" title-margin="margin-flush">IoT analytics use cases and applications</ptc-title>
+        </div>
+        
+        <div class="is-col-12 is-col-6-md is-col-3-xl">
+          <ptc-title type="h3" upperline="no-upperline" title-margin="margin-flush">Smart Factories</ptc-title>
+          <ptc-para para-margin="margin-3" para-line-h="line-height-p">
+            Manufacturers equip their assets and production lines with sensors to monitor performance. This allows them to monitor the quantity and quality of the assets they are
+            producing. Better quality products lead to reduced costs and scrap along with better customer experiences—all of which contribute to revenue gains.
+          </ptc-para>
+        </div>
+        
+        <div class="is-col-12 is-col-6-md is-col-3-xl">
+          <ptc-title type="h3" upperline="no-upperline" title-margin="margin-flush">Connected Products</ptc-title>
+          <ptc-para para-margin="margin-3" para-line-h="line-height-p">
+            In addition to being able to leverage IoT data to improve factory processes, manufacturers can use IoT analytics to understand how the things they have built are
+            performing in the real world.
+          </ptc-para>
+        </div>
+        
+        <div class="is-col-12 is-col-6-md is-col-3-xl">
+          <ptc-title type="h3" upperline="no-upperline" title-margin="margin-flush">New Business Models</ptc-title>
+          <ptc-para para-margin="margin-3" para-line-h="line-height-p">
+            Vendors that used to simply sell products are now able to sell those products as a service, where customers pay based on monthly usage. Manufacturers are also able to
+            offer other value-added services such as over-the-air updates to software.
+          </ptc-para>
+        </div>
+        
+      </div>
+    </div>
+
+
+    <div class="ptc-container ptc-section-standard">
+      <div class="is-grid has-col-gap-lg has-row-gap-lg column-gap-mobile">
+        <div class="is-col-12 is-col-3-xl">
+          <ptc-title type="h2" title-margin="margin-flush">Powerful connection with industrial IoT</ptc-title>
+        </div>
+        
+        <div class="is-col-12 is-col-6-md is-col-3-xl">
+          <ptc-title type="h3" upperline="no-upperline" title-margin="margin-flush">Industrial connectivity: Your IIoT foundation</ptc-title>
+          <ptc-para para-margin="margin-3" para-line-h="line-height-p">Breaking the silos of niche protocols in your factory starts with getting your OT systems—and all your machines—speaking the same language. See how protocol translation and universal connectivity set you up for digital transformation initiatives in your plants while giving you maximum data visibility and allowing for faster time to value.
+          </ptc-para>
+          <ptc-spacer size="xx-small" breakpoint="x-small"></ptc-spacer>
+          <ptc-spacer size="small"></ptc-spacer>
+          <ptc-link href="https://www.ptc.com/en/technologies/iiot/industrial-connectivity" link-title="add title" theme="simple">Explore industrial connectivity</ptc-link>
+        </div>
+        
+        <div class="is-col-12 is-col-6-md is-col-3-xl">
+          <ptc-title type="h3" upperline="no-upperline" title-margin="margin-flush">Industry 4.0</ptc-title>
+          <ptc-para para-margin="margin-3" para-line-h="line-height-p">The fourth industrial revolution, or industry 4.0, has brought about a new era of automation and efficiency in manufacturing. Smart factories are adopting artificial intelligence, automation equipment, supervisory control and data acquisition (SCADA) software, and IIoT devices to streamline production processes.
+          </ptc-para>
+          <ptc-spacer size="xx-small" breakpoint="x-small"></ptc-spacer>
+          <ptc-spacer size="small"></ptc-spacer>
+          <ptc-link href="https://www.ptc.com/en/technologies/iiot/industrial-automation" link-title="add title" theme="simple">Explore industrial automation</ptc-link>
+        </div>
+        
+        <div class="is-col-12 is-col-6-md is-col-3-xl">
+          <ptc-title type="h3" upperline="no-upperline" title-margin="margin-flush">IT/OT convergence</ptc-title>
+          <ptc-para para-margin="margin-3" para-line-h="line-height-p">The IIoT has transformed industrial operations with standardized connectivity, powerful applications, and rich analytics. IT/OT convergence breaks down barriers between OT and IT systems, allowing OT to communicate directly with IT platforms for access to advanced IT systems.
+          </ptc-para>
+          <ptc-spacer size="xx-small" breakpoint="x-small"></ptc-spacer>
+          <ptc-spacer size="small"></ptc-spacer>
+          <ptc-link href="https://www.ptc.com/en/technologies/iiot/it-ot-convergence" link-title="add title" theme="simple">Explore IT/OT convergence</ptc-link>
+        </div>
+        
+      </div>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Ptc Form/preview.stories.js

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Form'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container ptc-section-standard">
+        <ptc-form></ptc-form>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Ptc Icon Card Slider/preview.stories.js

@@ -0,0 +1,121 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Icon Card Slider'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+      /* ptc-picture{
+            width: 260px;
+            height: 260px;
+        } */
+    </style>
+<section class="ptc-section-standard" id="">
+      <div class="ptc-container">
+        <div class="ptc-icon-card-slider-wrapper">
+          <max-width-container breakpoint="992" content-align="left" max-width="768">
+            <ptc-title seo-compatibility-mode type="h2" upperline="no-upperline" title-margin="margin-flush margin-bottom-4">
+              <h2>PTC Technologies</h2>
+            </ptc-title>
+
+            
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices tincidunt sollicitudin. Nulla a magna erat. Etiam consequat egestas.</p>
+            
+          </max-width-container>
+          <ptc-icon-card-slider-example id="">
+            <div class="swiper-slide">
+              <div class="icon-card">
+                <div class="icon-card-wrap">
+                  <ptc-picture 
+                    alt="Showing connectivity symbol"
+                    src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/314cc95c21fb4f168cb3b18707b13b68?v=4b13f72c%C2%A0%C2%A0"
+                    image-alignment="center"
+                    display-image="inline-block"
+                    max-width="32"
+                    styles="img{margin-bottom: 12px;}"
+                  ></ptc-picture>
+                  <ptc-title seo-compatibility-mode type="h3" text-align="center" upperline="no-upperline" title-margin="margin-flush margin-bottom-2">
+                    <h3>CAD</h3>
+                  </ptc-title>
+                  <div class="icon-card-description">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices tincidunt sollicitudin. Nulla a mag.</p>
+                  </div>
+                  <ptc-button type="link" color="ptc-quaternary" tracker-id="icon-card-1" link-href="https://www.ptc.com" target="_blank" text-align="center">Lorem Ipsum</ptc-button>
+                </div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="icon-card">
+                <div class="icon-card-wrap">
+                  <ptc-picture 
+                    alt="Showing connectivity symbol"
+                    src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/314cc95c21fb4f168cb3b18707b13b68?v=4b13f72c%C2%A0%C2%A0"
+                    image-alignment="center"
+                    display-image="inline-block"
+                    max-width="32"
+                    styles="img{margin-bottom: 12px;}"
+                  ></ptc-picture>
+                  <ptc-title seo-compatibility-mode type="h3" text-align="center" upperline="no-upperline" title-margin="margin-flush margin-bottom-2">
+                    <h3>Engineering Calculations</h3>
+                  </ptc-title>
+                  <div class="icon-card-description">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices tincidunt sollicitudin. Nulla a mag.</p>
+                  </div>
+                  <ptc-button type="link" color="ptc-quaternary" tracker-id="icon-card-2" link-href="https://www.ptc.com" target="_blank" text-align="center">Lorem Ipsum</ptc-button>
+                </div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="icon-card">
+                <div class="icon-card-wrap">
+                  <ptc-picture 
+                    alt="Showing connectivity symbol"
+                    src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/314cc95c21fb4f168cb3b18707b13b68?v=4b13f72c%C2%A0%C2%A0"
+                    image-alignment="center"
+                    display-image="inline-block"
+                    max-width="32"
+                    styles="img{margin-bottom: 12px;}"
+                  ></ptc-picture>
+                  <ptc-title seo-compatibility-mode type="h3" text-align="center" upperline="no-upperline" title-margin="margin-flush margin-bottom-2">
+                    <h3>Industrial Connectivity</h3>
+                  </ptc-title>
+                  <div class="icon-card-description">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices tincidunt sollicitudin. Nulla a mag.</p>
+                  </div>
+                  <ptc-button type="link" color="ptc-quaternary" tracker-id="icon-card-3" link-href="https://www.ptc.com" target="_blank" text-align="center">Lorem Ipsum</ptc-button>
+                </div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="icon-card">
+                <div class="icon-card-wrap">
+                  <ptc-picture 
+                    alt="Showing connectivity symbol"
+                    src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/314cc95c21fb4f168cb3b18707b13b68?v=4b13f72c%C2%A0%C2%A0"
+                    image-alignment="center"
+                    display-image="inline-block"
+                    max-width="32"
+                    styles="img{margin-bottom: 12px;}"
+                  ></ptc-picture>
+                  <ptc-title seo-compatibility-mode type="h3" text-align="center" upperline="no-upperline" title-margin="margin-flush margin-bottom-2">
+                    <h3>SLM</h3>
+                  </ptc-title>
+                  <div class="icon-card-description">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices tincidunt sollicitudin. Nulla a mag.</p>
+                  </div>
+                  <ptc-button type="link" color="ptc-quaternary" tracker-id="icon-card-4" link-href="https://www.ptc.com" target="_blank" text-align="center">Lorem Ipsum</ptc-button>
+                </div>
+              </div>
+            </div>
+          </ptc-icon-card-slider-example>
+        </div>
+      </div>
+    </section>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Ptc Icon Component/preview.stories.js

@@ -0,0 +1,185 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Icon Component'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<section class="ptc-section-standard">
+    <div class="ptc-container">
+      <div class="u-section-heading-wrapper ic-header-margin">
+        <ptc-title type='h2' text-align='center' upperline="no-upperline" title-margin="margin-flush"
+          title-height="xx-large">
+          Lorem Ipsum Dolor Sit Amet Consectetur
+        </ptc-title>
+        <ptc-para font-size="small" font-weight="w-4" para-margin="margin-top-4" para-line-h="line-height-p"
+          para-align="center">
+          Maecenas lectus magna, tempor vel erat ac, mollis sagittis dolor. Nam vitae arcu orci. Nulla ultricies tempor
+          tempor. Praesent tempus semper sapien quis euismod. Quisque volutpat commodo imperdiet. Quisque a efficitur
+          augue, vel finibus quam.
+        </ptc-para>
+      </div>
+
+      <ptc-icon-component>
+        <div class="icon-component u-textAlign-ctr"><max-width-container max-width="350">
+            <ptc-picture alt="Showing connectivity symbol"
+              src="https://www-dev.ptc.com/-/media/test/AR-Capabilities-fast-authoring-image.svg" width="120"
+              height="120" image-alignment="center" display-image="inline-block"></ptc-picture>
+            <ptc-title type='h3' text-align='center' upperline="no-upperline">
+              Aenean Tempor Neque Sit Amet Tortor
+            </ptc-title>
+            <ptc-spacer size="x-small"></ptc-spacer>
+            <ptc-spacer size="x-small" breakpoint="x-small"></ptc-spacer>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-flush" para-line-h="line-height-p">
+              <ptc-readmore-char max-characters="200" description="Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa.
+            Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum
+            volutpat. Nulla ut nunc Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa.
+            Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum
+            volutpat. Nulla ut nunc">
+
+              </ptc-readmore-char>
+            </ptc-para>
+
+            
+            <ptc-spacer size="x-small" breakpoint="x-small"></ptc-spacer>
+            <ptc-spacer size="xx-small"></ptc-spacer>
+            <ptc-spacer size="large"></ptc-spacer>
+            
+             <a href="#" class="ptc-link">Dolor
+              Sit Amet Dolor Sit Amet test</a>
+            
+          </max-width-container></div>
+        
+        <div class="icon-component u-textAlign-ctr"><max-width-container max-width="350">
+            <ptc-picture alt="Showing connectivity symbol"
+              src="https://www-dev.ptc.com/-/media/test/AR-Capabilities-fast-authoring-image.svg" width="120"
+              height="120" image-alignment="center" display-image="inline-block"></ptc-picture>
+            <ptc-title type='h3' text-align='center' upperline="no-upperline">
+              <ptc-tooltip text-lines="4" z-index="z-2" description="Aenean Tempor Neque Sit Amet Tortor"
+                position="bottom">
+              </ptc-tooltip>
+            </ptc-title>
+            <ptc-spacer size="x-small"></ptc-spacer>
+            <ptc-spacer size="x-small" breakpoint="x-small"></ptc-spacer>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-flush" para-line-h="line-height-p">
+              <ptc-readmore more-text="Read more" visible-lines-custom="8" less-text="Read less"
+                read-more-position="center" display="inline">
+                Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa.
+                Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum
+                volutpat.
+              </ptc-readmore>
+            </ptc-para>
+
+            
+            <ptc-spacer size="x-small" breakpoint="x-small"></ptc-spacer>
+            <ptc-spacer size="xx-small"></ptc-spacer>
+            <ptc-spacer size="large"></ptc-spacer>
+            <ptc-link seo-compatibility-mode href="https://www.google.com" link-title="Google" font-size="medium-large" theme="simple">Dolor
+              Sit Amet Dolor Sit Amet</ptc-link>
+            
+          </max-width-container></div>
+        
+        <div class="icon-component u-textAlign-ctr"><max-width-container max-width="350">
+            <ptc-picture alt="Showing connectivity symbol"
+              src="https://www-dev.ptc.com/-/media/test/AR-Capabilities-fast-authoring-image.svg" width="120"
+              height="120" image-alignment="center" display-image="inline-block"></ptc-picture>
+            <ptc-title type='h3' text-align='center' upperline="no-upperline">
+              <ptc-tooltip text-lines="4" z-index="z-2" description="Aenean Tempor Neque Sit Amet Tortor"
+                position="bottom">
+              </ptc-tooltip>
+            </ptc-title>
+            <ptc-spacer size="x-small"></ptc-spacer>
+            <ptc-spacer size="x-small" breakpoint="x-small"></ptc-spacer>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-flush" para-line-h="line-height-p">
+              <ptc-readmore more-text="Read more" visible-lines-custom="8" less-text="Read less"
+                read-more-position="center" display="inline">
+                Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa.
+                Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum
+                volutpat.
+              </ptc-readmore>
+            </ptc-para>
+
+            
+            <ptc-spacer size="x-small" breakpoint="x-small"></ptc-spacer>
+            <ptc-spacer size="xx-small"></ptc-spacer>
+            <ptc-spacer size="large"></ptc-spacer>
+            <ptc-link href="https://www.google.com" link-title="Google" font-size="medium-large" theme="simple">Dolor
+              Sit
+              Amet</ptc-link>
+            
+          </max-width-container> </div>
+        
+        <div class="icon-component u-textAlign-ctr"><max-width-container max-width="350">
+            <ptc-picture alt="Showing connectivity symbol"
+              src="https://www-dev.ptc.com/-/media/test/AR-Capabilities-fast-authoring-image.svg" width="120"
+              height="120" image-alignment="center" display-image="inline-block"></ptc-picture>
+            <ptc-title type='h3' text-align='center' upperline="no-upperline">
+              <ptc-tooltip text-lines="4" z-index="z-2" description="Aenean Tempor Neque Sit Amet Tortor"
+                position="bottom">
+              </ptc-tooltip>
+            </ptc-title>
+            <ptc-spacer size="x-small"></ptc-spacer>
+            <ptc-spacer size="x-small" breakpoint="x-small"></ptc-spacer>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-flush" para-line-h="line-height-p">
+              <ptc-readmore more-text="Read more" visible-lines-custom="8" less-text="Read less"
+                read-more-position="center" display="inline">
+                Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa.
+                Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum
+                volutpat.
+              </ptc-readmore>
+            </ptc-para>
+
+            
+            <ptc-spacer size="x-small" breakpoint="x-small"></ptc-spacer>
+            <ptc-spacer size="xx-small"></ptc-spacer>
+            <ptc-spacer size="large"></ptc-spacer>
+            <ptc-link href="https://www.google.com" link-title="Google" font-size="medium-large" theme="simple">Dolor
+              Sit
+              Amet</ptc-link>
+            
+          </max-width-container></div>
+        
+        <div class="icon-component u-textAlign-ctr">
+          <max-width-container max-width="350">
+            <ptc-picture alt="Showing connectivity symbol"
+              src="https://www-dev.ptc.com/-/media/test/AR-Capabilities-fast-authoring-image.svg" width="120"
+              height="120" image-alignment="center" display-image="inline-block"></ptc-picture>
+            <ptc-title type='h3' text-align='center' upperline="no-upperline">
+              <ptc-tooltip text-lines="4" z-index="z-2" description="Aenean Tempor Neque Sit Amet Tortor"
+                position="bottom">
+              </ptc-tooltip>
+            </ptc-title>
+            <ptc-spacer size="x-small"></ptc-spacer>
+            <ptc-spacer size="x-small" breakpoint="x-small"></ptc-spacer>
+            <ptc-para font-size="small" font-weight="w-4" para-margin="margin-flush" para-line-h="line-height-p">
+              <ptc-readmore more-text="Read more" visible-lines-custom="8" less-text="Read less"
+                read-more-position="center" display="inline">
+                Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa.
+                Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum
+                volutpat.
+              </ptc-readmore>
+            </ptc-para>
+
+            
+            <ptc-spacer size="x-small" breakpoint="x-small"></ptc-spacer>
+            <ptc-spacer size="xx-small"></ptc-spacer>
+            <ptc-spacer size="large"></ptc-spacer>
+            <ptc-link href="https://www.google.com" link-title="Google" font-size="medium-large" theme="simple">Dolor
+              Sit
+              Amet</ptc-link>
+            
+          </max-width-container>
+        </div>
+        
+
+      </ptc-icon-component>
+    </div>
+  </section>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();