@ptcwebops/ptcw-design 6.3.35-beta → 6.3.35

package/dist/collection/stories/organisms/ptc/Events Listing Cards/preview.stories.js

@@ -0,0 +1,169 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Events Listing Cards'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container-lg" style="margin:48px 0;">
+            <ptc-spacer breakpoint="x-large" size="small"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+            <div class="is-grid">
+                <div class="is-col-12-xs is-col-3-lg is-col-4-xxxl">
+                </div>
+                <div class="is-col-12-xs is-col-9-lg is-col-8-xxxl is-placed-center">
+                    <div class="search-gallery active">
+                        <div class="is-grid" id="items">
+                            <div class="is-col-12-xs is-col-6-md is-col-6-lg is-col-4-xxl">
+                                <ptc-card has-image="true" card-type="listing-card" 
+                                card-href="/en/events/Events-Item" 
+                                heading="Event Page Listing Title - Max 70 characters" 
+                                card-date="January 1, 2020" 
+                                event-type="In-Person">                                    
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Event Listing Body Copy - Max 150 characters
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs is-col-6-md is-col-6-lg is-col-4-xxl">
+                                <ptc-card has-image="true" card-type="listing-card" 
+                                card-href="/en/events/modelsearch" heading="ModelSearch - Geometric Similarity Search in Perfection" 
+                                card-date="November 15, 2020" event-type="Webinar">                                                                        
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Revolutionary 3D geometry search solution with fully automatic search functionality.
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs is-col-6-md is-col-6-lg is-col-4-xxl">
+                                <ptc-card has-image="true" card-type="listing-card" card-href="/en/events/delete-test" 
+                                heading="Meet with PTC at PI Apparel Supply Chain Forum 2022, NYC" card-date="September 14, 2022" 
+                                event-type="In-Person">                                                                                                       
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Request an onsite meeting and/or demo with a PTC expert today.
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs is-col-6-md is-col-6-lg is-col-4-xxl">
+                                <ptc-card has-image="true" card-type="listing-card" 
+                                card-href="/en/events/dpm-roundtable" heading="Digital Performance Management Executive Roundtable Series" 
+                                card-date="November 29, 2022" event-type="Webinar">                                                                                                    
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Time is valuable. Time is money. Join one of our Digital Performance Management Executive Roundtables to discuss how you can crea...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs is-col-6-md is-col-6-lg is-col-4-xxl">
+                                <ptc-card has-image="true" card-type="listing-card" card-href="/en/events/ptc-university-new-courses" 
+                                heading="PTC University’s New Project-based Courses and 9 More New C..." card-date="December 7, 2022" 
+                                event-type="In-Person">                                                                                                                                     
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Register for this webinar and we will share information about the new classes including a deep-dive into the project-based course...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs is-col-6-md is-col-6-lg is-col-4-xxl">
+                                <ptc-card has-image="true" card-type="listing-card" card-href="/en/events/ptc-university-new-courses" 
+                                heading="PTC University’s New Project-based Courses and 9 More New C..." card-date="December 7, 2022" 
+                                event-type="In-Person">                                                                                                                                     
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Register for this webinar and we will share information about the new classes including a deep-dive into the project-based course...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs is-col-6-md is-col-6-lg is-col-4-xxl">
+                                <ptc-card has-image="true" card-type="listing-card" card-href="/en/events/ptc-university-new-courses" 
+                                heading="PTC University’s New Project-based Courses and 9 More New C..." card-date="December 7, 2022" 
+                                event-type="In-Person">                                                                                                                                     
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Register for this webinar and we will share information about the new classes including a deep-dive into the project-based course...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs is-col-6-md is-col-6-lg is-col-4-xxl">
+                                <ptc-card has-image="true" card-type="listing-card" card-href="/en/events/ptc-university-new-courses" 
+                                heading="PTC University’s New Project-based Courses and 9 More New C..." card-date="December 7, 2022" 
+                                event-type="In-Person">                                                                                                                                     
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Register for this webinar and we will share information about the new classes including a deep-dive into the project-based course...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs is-col-6-md is-col-6-lg is-col-4-xxl">
+                                <ptc-card has-image="true" card-type="listing-card" card-href="/en/events/ptc-university-new-courses" 
+                                heading="PTC University’s New Project-based Courses and 9 More New C..." card-date="December 7, 2022" 
+                                event-type="In-Person">                                                                                                                                     
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Register for this webinar and we will share information about the new classes including a deep-dive into the project-based course...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>                                
+                            </div>
+                        </div>
+                    </div>                    
+                </div>
+                <div class="is-col-1-xxxl"></div>
+            </div>
+            <ptc-spacer breakpoint="x-large" size="small"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Events Listing Cards Horizontal/preview.stories.js

@@ -0,0 +1,169 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Events Listing Cards Horizontal'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container-lg" style="margin:48px 0px;">
+            <ptc-spacer breakpoint="x-large" size="small"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+            <div class="is-grid">
+                <div class="is-col-12-xs is-col-3-lg is-col-4-xxxl">
+                </div>
+                <div class="is-col-12-xs is-col-9-lg is-col-8-xxxl">
+                    <div class="search-gallery active">
+                        <div class="is-grid" id="items">
+                            <div class="is-col-12-xs">
+                                <ptc-card has-image="true" card-type="listing-card-horizontal"
+                                card-href="/en/events/Events-Item"
+                                heading="Event Page Listing Title - Max 70 characters"
+                                card-date="January 1, 2020"
+                                event-type="In-Person">
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Event Listing Body Copy - Max 150 characters
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs">
+                                <ptc-card has-image="true" card-type="listing-card-horizontal"
+                                card-href="/en/events/modelsearch" heading="ModelSearch - Geometric Similarity Search in Perfection"
+                                card-date="November 15, 2020" event-type="Webinar">
+                                    <ptc-img slot="slot-image"
+                                    img-url="https://www.ptc.com/-/media/Images/new-org/600x280/arbortext/arbortext-implicit-explicit-600x280.jpg:1920x1080"
+                                             image-type="smart-img"
+                                             load-mode="lazy-bg"></ptc-img>
+                                    <div slot="slot-description">
+                                        <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Revolutionary 3D geometry search solution with fully automatic search functionality.Revolutionary 3D geometry search solution with fully automatic search functionality.
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs">
+                                <ptc-card has-image="true" card-type="listing-card-horizontal" card-href="/en/events/delete-test"
+                                heading="Meet with PTC at PI Apparel Supply Chain Forum 2022, NYC" card-date="September 14, 2022"
+                                event-type="In-Person">
+                                    <ptc-img slot="slot-image"
+                                    img-url="https://www.ptc.com/-/media/Images/new-org/300x200/events/cad-on-tap-300x200.jpg:1920x1080"
+                                             image-type="smart-img"
+                                             load-mode="lazy-bg"></ptc-img>
+                                    <div slot="slot-description">
+                                        <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Request an onsite meeting and/or demo with a PTC expert today.
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs">
+                                <ptc-card has-image="true" card-type="listing-card-horizontal"
+                                card-href="/en/events/dpm-roundtable" heading="Digital Performance Management Executive Roundtable Series"
+                                card-date="November 29, 2022" event-type="Webinar">
+                                    <ptc-img slot="slot-image"
+                                    img-url="https://www.ptc.com/-/media/Images/Events/FY23/243488-Paris-Air-Show-Web-Banner_300x200.jpg:1920x1080"
+                                             image-type="smart-img"
+                                             load-mode="lazy-bg"></ptc-img>
+                                    <div slot="slot-description">
+                                        <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Time is valuable. Time is money. Join one of our Digital Performance Management Executive Roundtables to discuss how you can crea...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs">
+                                <ptc-card has-image="true" card-type="listing-card-horizontal" card-href="/en/events/ptc-university-new-courses"
+                                heading="PTC University’s New Project-based Courses and 9 More New C..." card-date="December 7, 2022"
+                                event-type="In-Person">
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Register for this webinar and we will share information about the new classes including a deep-dive into the project-based course...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs">
+                                <ptc-card has-image="true" card-type="listing-card-horizontal" card-href="/en/events/ptc-university-new-courses"
+                                heading="PTC University’s New Project-based Courses and 9 More New C..." card-date="December 7, 2022"
+                                event-type="In-Person">
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Register for this webinar and we will share information about the new classes including a deep-dive into the project-based course...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs">
+                                <ptc-card has-image="true" card-type="listing-card-horizontal" card-href="/en/events/ptc-university-new-courses"
+                                heading="PTC University’s New Project-based Courses and 9 More New C..." card-date="December 7, 2022"
+                                event-type="In-Person">
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Register for this webinar and we will share information about the new classes including a deep-dive into the project-based course...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs">
+                                <ptc-card has-image="true" card-type="listing-card-horizontal" card-href="/en/events/ptc-university-new-courses"
+                                heading="PTC University’s New Project-based Courses and 9 More New C..." card-date="December 7, 2022"
+                                event-type="In-Person">
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Register for this webinar and we will share information about the new classes including a deep-dive into the project-based course...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                                <div class="is-col-12-xs">
+                                <ptc-card has-image="true" card-type="listing-card-horizontal" card-href="/en/events/ptc-university-new-courses"
+                                heading="PTC University’s New Project-based Courses and 9 More New C..." card-date="December 7, 2022"
+                                event-type="In-Person">
+                                    <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="x-small" font-weight="w-4" para-line-h="line-height-19" class="hydrated">
+                                            Register for this webinar and we will share information about the new classes including a deep-dive into the project-based course...
+                                        </ptc-para>
+                                    </div>
+                                </ptc-card>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="is-col-1-xxxl"></div>
+            </div>
+            <ptc-spacer breakpoint="x-large" size="small"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Featured Events Slider/preview.stories.js

@@ -0,0 +1,165 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Featured Events Slider'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<section class="ptc-section">
+      <div class="ptc-container">
+        <ptc-title type="h2" seo-compatibility-mode title-color="gray" upperline="no-upperline" title-margin="margin-bottom-4 margin-flush">
+          <h2>Featured events</h2>
+        </ptc-title>
+        <ptc-para seo-compatibility-mode>
+          <p>Aliquam erat volutpat. Integer ac placerat massa nunc aliquam libero in aliquam vestibulum.</p>
+        </ptc-para>
+      </div>
+      <featured-events-slider-example>
+        <div 
+          class="swiper-slide fe-slider-card"
+          style="
+            background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.63) 50%),
+              url('https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/7babd5335e8e46febf347747d8c0badc');
+          "
+        >
+          <max-width-container breakpoint="992" content-align="left" max-width-p="50">
+            <ptc-title type="h3" seo-compatibility-mode title-color="white" upperline="no-upperline" title-margin="margin-bottom-3 margin-flush">
+              <h3>Lorem Ipsum Dolor Sit Amet Consectetur</h3>
+            </ptc-title>
+            <div class="card-meta">
+              <ul class="standard-list">
+                <li><icon-asset type="ptc" size="x-small" color="white" name="calender-small" class="u-flex"></icon-asset><span>October 29, 2024</span></li>
+                <li><icon-asset type="ptc" size="x-small" color="white" name="user-group" class="u-flex"></icon-asset><span>In Person</span></li>
+                <li><icon-asset type="ptc" size="x-small" color="white" name="chat" class="u-flex"></icon-asset><span>English</span></li>
+              </ul>
+            </div>
+            <ptc-para 
+              seo-compatibility-mode
+              para-color="white"
+              enable-tooltip="true"
+              max-chars="175"
+              no-overflow="true"
+              para-margin="margin-flush margin-bottom-6"
+              para-line-h="line-height-p"
+            >
+              <p>
+                Nunc et dolor arcu. Nam in malesuada nunc. Morbi sed urna non erat. Fusce pretium ipsum tortor, quis maximus risus auctor vel. Nunc sit amet mauris ex.Nunc et dolor
+                arcu. Nam in malesuada nunc. Morbi sed urna non erat. Fusce pretium ipsum tortor, quis maximus risus auctor vel. Nunc sit amet mauris ex.Nunc et dolor arcu. Nam in
+                malesuada nunc. Morbi sed urna non erat. Fusce pretium ipsum tortor, quis maximus risus auctor vel. Nunc sris ex.
+              </p>
+            </ptc-para>
+            <ptc-link 
+              tracker-id="fe-slider-cta-1"
+              href="https://www.ptc.com"
+              link-title="PTC"
+              theme="d-green-underline"
+              styles=".ptc-link{ border: 2px solid transparent; }"
+              dark
+              dark-focus-state
+              seo-compatibility-mode
+              >Watch Now
+            </ptc-link>
+          </max-width-container>
+        </div>
+        <div 
+          class="swiper-slide fe-slider-card"
+          style="
+            background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.63) 50%),
+              url('https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/7babd5335e8e46febf347747d8c0badc');
+          "
+        >
+          <max-width-container breakpoint="992" content-align="left" max-width-p="50">
+            <ptc-title type="h3" seo-compatibility-mode title-color="white" upperline="no-upperline" title-margin="margin-bottom-3 margin-flush">
+              <h3>Lorem Ipsum Dolor Sit Amet Consectetur</h3>
+            </ptc-title>
+            <div class="card-meta">
+              <ul class="standard-list">
+                <li><icon-asset type="ptc" size="x-small" color="white" name="calender-small" class="u-flex"></icon-asset><span>October 29, 2024</span></li>
+                <li><icon-asset type="ptc" size="x-small" color="white" name="user-group" class="u-flex"></icon-asset><span>In Person</span></li>
+                <li><icon-asset type="ptc" size="x-small" color="white" name="chat" class="u-flex"></icon-asset><span>English</span></li>
+              </ul>
+            </div>
+            <ptc-para 
+              seo-compatibility-mode
+              para-color="white"
+              enable-tooltip="true"
+              max-chars="175"
+              no-overflow="true"
+              para-margin="margin-flush margin-bottom-6"
+              para-line-h="line-height-p"
+            >
+              <p>
+                Nunc et dolor arcu. Nam in malesuada nunc. Morbi sed urna non erat. Fusce pretium ipsum tortor, quis maximus risus auctor vel. Nunc sit amet mauris ex.Nunc et dolor
+                arcu. Nam in malesuada nunc. Morbi sed urna non erat. Fusce pretium ipsum tortor, quis maximus risus auctor vel. Nunc sit amet mauris ex.Nunc et dolor arcu. Nam in
+                malesuada nunc. Morbi sed urna non erat. Fusce pretium ipsum tortor, quis maximus risus auctor vel. Nunc sris ex.
+              </p>
+            </ptc-para>
+            <ptc-link 
+              tracker-id="fe-slider-cta-1"
+              href="https://www.ptc.com"
+              link-title="PTC"
+              theme="d-green-underline"
+              styles=".ptc-link{ border: 2px solid transparent; }"
+              dark
+              dark-focus-state
+              seo-compatibility-mode
+              >Watch Now
+            </ptc-link>
+          </max-width-container>
+        </div>
+        <div 
+          class="swiper-slide fe-slider-card"
+          style="
+            background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.63) 50%),
+              url('https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/7babd5335e8e46febf347747d8c0badc');
+          "
+        >
+          <max-width-container breakpoint="992" content-align="left" max-width-p="50">
+            <ptc-title type="h3" seo-compatibility-mode title-color="white" upperline="no-upperline" title-margin="margin-bottom-3 margin-flush">
+              <h3>Lorem Ipsum Dolor Sit Amet Consectetur</h3>
+            </ptc-title>
+            <div class="card-meta">
+              <ul class="standard-list">
+                <li><icon-asset type="ptc" size="x-small" color="white" name="calender-small" class="u-flex"></icon-asset><span>October 29, 2024</span></li>
+                <li><icon-asset type="ptc" size="x-small" color="white" name="user-group" class="u-flex"></icon-asset><span>In Person</span></li>
+                <li><icon-asset type="ptc" size="x-small" color="white" name="chat" class="u-flex"></icon-asset><span>English</span></li>
+              </ul>
+            </div>
+            <ptc-para 
+              seo-compatibility-mode
+              para-color="white"
+              enable-tooltip="true"
+              max-chars="175"
+              no-overflow="true"
+              para-margin="margin-flush margin-bottom-6"
+              para-line-h="line-height-p"
+            >
+              <p>
+                Nunc et dolor arcu. Nam in malesuada nunc. Morbi sed urna non erat. Fusce pretium ipsum tortor, quis maximus risus auctor vel. Nunc sit amet mauris ex.Nunc et dolor
+                arcu. Nam in malesuada nunc. Morbi sed urna non erat. Fusce pretium ipsum tortor, quis maximus risus auctor vel. Nunc sit amet mauris ex.Nunc et dolor arcu. Nam in
+                malesuada nunc. Morbi sed urna non erat. Fusce pretium ipsum tortor, quis maximus risus auctor vel. Nunc sris ex.
+              </p>
+            </ptc-para>
+            <ptc-link 
+              tracker-id="fe-slider-cta-1"
+              href="https://www.ptc.com"
+              link-title="PTC"
+              theme="d-green-underline"
+              styles=".ptc-link{ border: 2px solid transparent; }"
+              dark
+              dark-focus-state
+              seo-compatibility-mode
+              >Watch Now
+            </ptc-link>
+          </max-width-container>
+        </div>
+      </featured-events-slider-example>
+    </section>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

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

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Featured List'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-featured-list></ptc-featured-list>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Filter Level Theater/preview.stories.js

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Filter Level Theater'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-filter-level-theater enable-filters="true" back-button-text="Back to Overview"></ptc-filter-level-theater>
+  <ptc-theater-video-modal></ptc-theater-video-modal>
+  <script src="https://players.brightcove.net/1532789042001/HknUe20R_default/index.min.js"></script>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Five Card Value Prop/preview.stories.js

@@ -0,0 +1,64 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Five Card Value Prop'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+    .flex-gap-adjustment {
+      gap: var(--ptc-element-spacing-02);
+    }
+
+    @media only screen and (min-width: 480px) {
+      .flex-gap-adjustment {
+        gap: var(--ptc-element-spacing-04);
+      }
+    }
+  </style>
+<div class="ptc-container ptc-section-standard">
+    <div 
+      class="u-flex u-flex-wrap flex-align-items-center u-flex-justify-center flex-gap-adjustment pad-margin-adjustment">
+      <ptc-square-card number="226,000+" arrow-direction="up">
+        <div slot="after-icon">Worldwide FlexPLM Users</div>
+      </ptc-square-card>
+      <ptc-square-card number="57,000+" arrow-direction="down">
+        <div slot="after-icon">Supply chain users</div>
+      </ptc-square-card>
+      <ptc-square-card number="1,200+" arrow-direction="down">
+        <div slot="after-icon">Reduced NPI time</div>
+      </ptc-square-card>
+      <ptc-square-card number="18%" arrow-direction="up">
+        <div slot="after-icon">Reduced cost of quality</div>
+      </ptc-square-card>
+      
+      <ptc-square-card number="in nisl nisi scelerisque eu ultrices" arrow-direction="up">
+        
+        <div slot="before-icon">eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer
+          enim neque volutpat ac tincidunt vitae semper quis lectus nulla at volutpat diam ut</div>
+        
+        <div slot="after-icon">lacus luctus accumsan tortor posuere ac ut consequat semper viverra nam libero justo
+          laoreet sit amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra sit amet aliquam
+          id diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod elementum nisi quis
+          eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec
+          ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis in eu</div>
+      </ptc-square-card>
+    </div>
+
+    <hr>
+    <ptc-square-card arrow-direction="up">
+      <div slot="after-icon">Worldwide FlexPLM Users</div>
+    </ptc-square-card>
+
+    <hr>
+    <ptc-square-card number="226,000+">
+      <div slot="after-icon">Worldwide FlexPLM Users</div>
+    </ptc-square-card>
+  </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

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

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