@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/Listing Filter/preview.stories.js

@@ -0,0 +1,256 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Listing Filter'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-hero hero-type="jumbotron" class="ptc-jumbotron"
+        bg-url="https://www.ptc.com/-/media/Images/new-org/1920x500/Digital-Manufacturing/Header-Increase-OEE-1920x500.jpg?h=500&w=1920&la=en&hash=EBD7026CF9A9186AFD98050BF2055750">
+        <div class="ptc-container">
+            <div class="is-grid">
+                <div class="is-col-12">
+                    <ptc-breadcrumb>
+                        <list-item list-type="breadcrumb">Events</list-item>
+                    </ptc-breadcrumb>
+                    <ptc-spacer size="large"></ptc-spacer>
+                    <ptc-title type='h1' text-align='left' is-plm-hub upperline="no-upperline">PTC Events</ptc-title>
+                    <ptc-spacer size="xxxx-large"></ptc-spacer>
+                    <ptc-spacer size="xx-large"></ptc-spacer>
+                </div>
+            </div>
+        </div>
+    </ptc-hero>
+    <div class="ptc-container" style="margin-top:48px">
+        <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">
+                <ptc-collapse-list placeholder-text="Search..." debounce-update-delay="300"  expand-first-item>
+                    <collapse-list-item allow-multi-select="true" facet-display="By Technology">
+                        <collapse-list-item category="By Technology" facet-display="Augmented Reality"
+                            facet-value="value 1"></collapse-list-item>
+                        <collapse-list-item category="By Technology" facet-display="CAD"
+                            facet-value="value 2"></collapse-list-item>
+                        <collapse-list-item category="By Technology" facet-display="Industrial Connectivity"
+                            facet-value="value 3"></collapse-list-item>
+                        <collapse-list-item category="By Technology" facet-display="Industrial Internet of Things"
+                            facet-value="value 4"></collapse-list-item>
+                        <collapse-list-item category="By Technology" facet-display="PLM"
+                            facet-value="value 5"></collapse-list-item>
+                        <collapse-list-item category="By Technology" facet-display="Service and Parts"
+                            facet-value="value 6"></collapse-list-item>
+                    </collapse-list-item>
+                    <collapse-list-item allow-multi-select="true" facet-display="By Product">
+                        <collapse-list-item category="By Product" facet-display="Arbortext" facet-value="value 7">
+                            <collapse-list-item category="By Product" facet-display="Creo"
+                                facet-value="value 8"></collapse-list-item>
+                            <collapse-list-item category="By Product" facet-display="Kepware"
+                                facet-value="value 9"></collapse-list-item>
+                        </collapse-list-item>
+                        <collapse-list-item category="By Product" facet-display="Arena" facet-value="value 10">
+                            <collapse-list-item category="By Product" facet-display="Onshape"
+                                facet-value="value 11"></collapse-list-item>
+                            <collapse-list-item category="By Product" facet-display="Thingworx"
+                                facet-value="value 12"></collapse-list-item>
+                        </collapse-list-item>
+                    </collapse-list-item>
+                    <collapse-list-item allow-multi-select="false" category="By Language" facet-display="By Language">
+                        <collapse-list-item category="By Language" facet-display="English"
+                            facet-value="value 13"></collapse-list-item>
+                        <collapse-list-item category="By Language" facet-display="Chinese"
+                            facet-value="value 14"></collapse-list-item>
+                        <collapse-list-item category="By Language" facet-display="French"
+                            facet-value="value 15"></collapse-list-item>
+                        <collapse-list-item category="By Language" facet-display="Spanish"
+                            facet-value="value 16"></collapse-list-item>
+                    </collapse-list-item>
+                    <collapse-list-item allow-multi-select="false" category="Test" facet-display="Test">
+                        <collapse-list-item category="Test" facet-display="Test 1"
+                            facet-value="Test 1"></collapse-list-item>
+                        <collapse-list-item category="Test" facet-display="Test 2" facet-value="Test 2">
+                            <collapse-list-item category="Test" facet-display="Test 5"
+                                facet-value="Test 5"></collapse-list-item>
+                            <collapse-list-item category="Test" facet-display="Test 6"
+                                facet-value="Test 6"></collapse-list-item>
+                            <collapse-list-item category="Test" facet-display="Test 7" facet-value="Test 7">
+                                <collapse-list-item category="Test" facet-display="Test 9"
+                                    facet-value="Test 9"></collapse-list-item>
+                                <collapse-list-item category="Test" facet-display="Test 10"
+                                    facet-value="Test 10"></collapse-list-item>
+                                <collapse-list-item category="Test" facet-display="Test 11" facet-value="Test 11">
+                                    <collapse-list-item category="Test" facet-display="Test 13"
+                                        facet-value="Test 13"></collapse-list-item>
+                                    <collapse-list-item category="Test" facet-display="Test 14"
+                                        facet-value="Test 14"></collapse-list-item>
+                                    <collapse-list-item category="Test" facet-display="Test 15"
+                                        facet-value="Test 15"></collapse-list-item>
+                                    <collapse-list-item category="Test" facet-display="Test 16"
+                                        facet-value="Test 16"></collapse-list-item>
+                                </collapse-list-item>
+                                <collapse-list-item category="Test" facet-display="Test 12"
+                                    facet-value="Test 12"></collapse-list-item>
+                            </collapse-list-item>
+                            <collapse-list-item category="Test" facet-display="Test 8"
+                                facet-value="Test 8"></collapse-list-item>
+                        </collapse-list-item>
+                        <collapse-list-item category="Test" facet-display="Test 3"
+                            facet-value="Test 3"></collapse-list-item>
+                        <collapse-list-item category="Test" facet-display="Test 4"
+                            facet-value="Test 4"></collapse-list-item>
+                    </collapse-list-item>
+                    <collapse-list-item category="Partners" facet-display="Partners"
+                        facet-value="value 17"></collapse-list-item>
+                </ptc-collapse-list>
+            </div>
+            <div class="is-col-12-xs is-col-9-lg is-col-8-xxxl" style="height: 5000rem">
+                
+
+                <div class="is-grid">
+                    <div class="is-col-12">
+                        <div class="is-grid ic-col-12">
+                            <div class="is-col-12" style="height:50px;"></div>
+                            <div class="is-col-12">
+                                <div class="is-grid has-col-gap-md has-row-gap-md">
+                                    <div class="is-col-12-xs is-col-6-md is-col-4-xl">
+                                        <ptc-card has-image="true" card-type="listing-card"
+                                            card-href="http://www.google.com" heading="2022 SoCal RUG Event"
+                                            card-date="2022-1-2" ribbon-text="eBook">
+                                            <ptc-img slot="slot-image"
+                                                img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+                                                size-xs="600x450" size-sm="600x450" size-md="1108x658"
+                                                size-lg="1108x658" image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+                                            <div slot="slot-description">
+                                                <ptc-para font-size="medium" font-weight="w-4"
+                                                    para-line-h="line-height-19">
+                                                    Join us for live presentations and hear about the latest updates for
+                                                    Creo, Windchill PLM, and Thingworx IOT and Augmented Reality.
+                                                </ptc-para>
+                                            </div>
+                                        </ptc-card>
+                                    </div>
+                                    <div class="is-col-12-xs is-col-6-md is-col-4-xl">
+                                        <ptc-card has-image="true" card-type="listing-card"
+                                            card-href="http://www.google.com" heading="2022 SoCal RUG Event"
+                                            card-date="2022-1-2" ribbon-text="eBook">
+                                            <ptc-img slot="slot-image"
+                                                img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+                                                size-xs="600x450" size-sm="600x450" size-md="1108x658"
+                                                size-lg="1108x658" image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+                                            <div slot="slot-description">
+                                                <ptc-para font-size="medium" font-weight="w-4"
+                                                    para-line-h="line-height-19">
+                                                    Join us for live presentations and hear
+                                                </ptc-para>
+                                            </div>
+                                        </ptc-card>
+                                    </div>
+                                    <div class="is-col-12-xs is-col-6-md is-col-4-xl">
+                                        <ptc-card has-image="true" card-type="listing-card"
+                                            card-href="http://www.google.com" heading="2022 SoCal RUG Event"
+                                            card-date="2022-1-2" ribbon-text="eBook">
+                                            <ptc-img slot="slot-image"
+                                                img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+                                                size-xs="600x450" size-sm="600x450" size-md="1108x658"
+                                                size-lg="1108x658" image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+                                            <div slot="slot-description">
+                                                <ptc-para font-size="medium" font-weight="w-4"
+                                                    para-line-h="line-height-19">
+                                                    Join us for live presentations and hear about the latest updates for
+                                                    Creo, Windchill PLM, and Thingworx IOT and Augmented Reality.
+                                                </ptc-para>
+                                            </div>
+                                        </ptc-card>
+                                    </div>
+                                    <div class="is-col-12-xs is-col-6-md is-col-4-xl">
+                                        <ptc-card has-image="true" card-type="listing-card"
+                                            card-href="http://www.google.com" heading="2022 SoCal RUG Event"
+                                            card-date="2022-1-2" ribbon-text="eBook">
+                                            <ptc-img slot="slot-image"
+                                                img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+                                                size-xs="600x450" size-sm="600x450" size-md="1108x658"
+                                                size-lg="1108x658" image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+                                            <div slot="slot-description">
+                                                <ptc-para font-size="medium" font-weight="w-4"
+                                                    para-line-h="line-height-19">
+                                                    Join us for live presentations and hear about the latest updates for
+                                                    Creo, Windchill PLM, and Thingworx IOT and Augmented Reality.
+                                                </ptc-para>
+                                            </div>
+                                        </ptc-card>
+                                    </div>
+                                    <div class="is-col-12-xs is-col-6-md is-col-4-xl">
+                                        <ptc-card has-image="true" card-type="listing-card"
+                                            card-href="http://www.google.com" heading="2022 SoCal RUG Event"
+                                            card-date="2022-1-2" ribbon-text="eBook">
+                                            <ptc-img slot="slot-image"
+                                                img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+                                                size-xs="600x450" size-sm="600x450" size-md="1108x658"
+                                                size-lg="1108x658" image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+                                            <div slot="slot-description">
+                                                <ptc-para font-size="medium" font-weight="w-4"
+                                                    para-line-h="line-height-19">
+                                                    Join us for live presentations and hear about the latest updates for
+                                                    Creo, Windchill PLM, and Thingworx IOT and Augmented Reality.
+                                                </ptc-para>
+                                            </div>
+                                        </ptc-card>
+                                    </div>
+                                    <div class="is-col-12-xs is-col-6-md is-col-4-xl">
+                                        <ptc-card has-image="true" card-type="listing-card"
+                                            card-href="http://www.google.com" heading="2022 SoCal RUG Event"
+                                            card-date="2022-1-2" ribbon-text="eBook">
+                                            <ptc-img slot="slot-image"
+                                                img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+                                                size-xs="600x450" size-sm="600x450" size-md="1108x658"
+                                                size-lg="1108x658" image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+                                            <div slot="slot-description">
+                                                <ptc-para font-size="medium" font-weight="w-4"
+                                                    para-line-h="line-height-19">
+                                                    Join us for live presentations and hear about the latest updates for
+                                                    Creo, Windchill PLM, and Thingworx IOT and Augmented Reality.
+                                                </ptc-para>
+                                            </div>
+                                        </ptc-card>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="is-col-12"></div>
+                </div>
+
+            </div>
+            <ptc-spacer breakpoint="x-large" size="small"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+        </div>
+    </div>
+<script>
+    document.querySelector('ptc-collapse-list').addEventListener('changed', (e) => {
+        let list = document.querySelector('#filter-list');
+        let selectedItems = e.detail.selectedItems;
+        list.innerHTML = '';
+        for (let i = 0; i < selectedItems.length; i++) {
+            let item = selectedItems[i];
+            let tag = document.createElement("ptc-filter-tag");
+            tag.innerText = item.text;
+            tag.setAttribute('theme', 'standard');
+            tag.setAttribute('data-value', item.value);
+            list.appendChild(tag);
+        }
+
+    });
+    document.querySelector('#filter-list').addEventListener('click', function (e) {
+        if (e.target.tagName == 'PTC-FILTER-TAG') {
+            document.querySelector('ptc-collapse-list').removeSelectedItem(e.target.getAttribute('data-value'));
+        }
+    });
+</script>
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Main Nav Product Solutions Tab/preview.stories.js

@@ -0,0 +1,200 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Main Nav Product Solutions Tab'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        body {
+            background-color: #323B42;
+        }
+
+        @media (min-width: 1200px) {
+            body {
+                background-color: #20262A;
+            }
+        }
+    </style>
+<div class="ptc-container" style="max-width: 1000px">
+        <div class="product-tab">
+            <ptc-spacer breakpoint="x-large" size="small"></ptc-spacer>
+            <ptc-spacer breakpoint="x-large" size="small"></ptc-spacer>
+            <ptc-title type="h3" title-color="white" upperline="no-upperline" titleSize="small"
+                title-margin="margin-bottom-3">Products</ptc-title>
+            <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 is-col-6-md is-col-4-xl">
+                    <ptc-nav-card card-type="media-card" card-href="https://www.ptc.com/" heading="Arena"
+                        description="The industry's leading cloud-native PLM platform"
+                        card-logo="https://www.ptc.com/-/media/Images/new-org/icons/Nav/arena-icon-logo1.svg">
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-6-md is-col-4-xl">
+                    <ptc-nav-card card-type="media-card" card-href="https://www.ptc.com/" heading="Codebeamer"
+                        description="ALM software for modern development"
+                        card-logo="https://www.ptc.com/-/media/Images/new-org/icons/Nav/codebeamer-mini-logo.svg">
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-6-md is-col-4-xl">
+                    <ptc-nav-card card-type="media-card" card-href="https://www.ptc.com/" heading="Creo"
+                        description="Build better products faster with CAD/CAM/CAE"
+                        card-logo="https://www.ptc.com/-/media/Images/new-org/icons/Nav/creo-icon-logo-1.svg">
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-6-md is-col-4-xl">
+                    <ptc-nav-card card-type="media-card" card-href="https://www.ptc.com/" heading="Kepware"
+                        description="Connect, access, and control your industrial data"
+                        card-logo="https://www.ptc.com/-/media/Images/new-org/icons/Nav/kepware-icon-logo-1.svg">
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-6-md is-col-4-xl">
+                    <ptc-nav-card card-type="media-card" card-href="https://www.ptc.com/" heading="Onshape"
+                        description="The World's fastest growing cloud-native CAD platform"
+                        card-logo="https://www.ptc.com/-/media/Images/new-org/icons/Nav/onshape-icon-logo-1.svg">
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-6-md is-col-4-xl">
+                    <ptc-nav-card card-type="media-card" card-href="https://www.ptc.com/" heading="ThingWorx"
+                        description="The industry leader in industrial IoT platforms"
+                        card-logo="https://www.ptc.com/-/media/Images/new-org/icons/Nav/thingworx-icon-logo-1.svg">
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-6-md is-col-4-xl">
+                    <ptc-nav-card card-type="media-card" card-href="https://www.ptc.com/" heading="Vuforia"
+                        description="Our comprehensive, scalable enterprise AR platform"
+                        card-logo="https://www.ptc.com/-/media/Images/new-org/icons/Nav/vuforia-icon-logo-1.svg">
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-6-md is-col-4-xl">
+                    <ptc-nav-card card-type="media-card" card-href="https://www.ptc.com/" heading="Windchill"
+                        description="Enterprise product lifecycle management software"
+                        card-logo="https://www.ptc.com/-/media/Images/new-org/icons/Nav/windchil-icon-logo-1.svg">
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-6-md is-col-4-xl  p-cta-wrap">
+                    <ptc-nav-card card-href="https://www.ptc.com/" card-type="cta-card" heading="All Products">
+                    </ptc-nav-card>
+                </div>
+                
+            </div>
+            <ptc-spacer breakpoint="x-large" size="small"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+            <ptc-spacer breakpoint="x-large" size="small"></ptc-spacer>
+            <ptc-spacer breakpoint="x-large" size="small"></ptc-spacer>
+
+            <ptc-title type="h3" title-color="white" upperline="no-upperline" title-size="small"
+                title-margin="margin-bottom-3">More Products</ptc-title>
+            <div class="is-grid">
+                <div class="is-col-12 is-col-6-md is-col-4-xl">
+                    <ptc-nav-card card-type="media-card" card-href="https://www.ptc.com/"
+                        heading="Digital Performance Managment"
+                        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue arcu."
+                        card-logo="">
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-6-md is-col-4-xl">
+                    <ptc-nav-card card-href="https://www.ptc.com/" card-type="media-card" heading="Kepware+"
+                        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue arcu."
+                        card-logo="">
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-6-md is-col-4-xl">
+                    <ptc-nav-card card-type="media-card" card-href="https://www.ptc.com/" heading="Windchill+"
+                        description="ALM software for modern for modern development software for modern development for modern development for modern development"
+                        card-logo="">
+                    </ptc-nav-card>
+                </div>
+                
+
+            </div>
+
+
+
+
+
+
+
+            <ptc-spacer size="small"></ptc-spacer>
+            <ptc-spacer size="small"></ptc-spacer>
+
+            <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 is-col-3-xl">
+                    <ptc-nav-card card-type="links-card" heading="Technologies" link-title="tech">
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Augmented Reality Augmented Reality Augmented Reality</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">CAD</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Industrial IoT</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">PLM</ptc-link>
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-3-xl">
+                    <ptc-nav-card card-type="links-card" heading="Industries" card-href="/en/industries">
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Aerospace & Defense</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Automotive</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Electronics & High-Tech</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Industrials</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Life Sciences</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Oil & Gas</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Retail & Consumer Products</ptc-link>
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-3-xl">
+                    <ptc-nav-card card-type="links-card" heading="Solutions" card-href="#">
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Digital Engineering</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Digital Manufacturing</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Service Optimization</ptc-link>
+                    </ptc-nav-card>
+                </div>
+                
+                <div class="is-col-12 is-col-3-xl">
+                    <ptc-nav-card card-type="links-card" heading="Business Initiatives">
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Improve Efficiency</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Maximize Revenue Growth</ptc-link>
+                        <ptc-link href="https://www.ptc.com" link-title="PTC" theme="nav-card-link"
+                            font-weight="w-semibold">Reduce Costs</ptc-link>
+                    </ptc-nav-card>
+                </div>
+                
+            </div>
+
+
+        </div>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

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

@@ -0,0 +1,100 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Mathcad 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/ptc-mathcad.svg"
+        max-width="270" 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 Mathcad</ptc-title>
+        <ptc-nav-pills>
+            <a href="#." alt="">
+            <ptc-tooltip text-display="inline" max-length="35" z-index="z-2" description="Mathcad Youtube"
+                position="bottom"></ptc-tooltip>
+            </a>
+            <a href="#." alt="">
+            <ptc-tooltip text-display="inline" max-length="35" z-index="z-2" description="Community"
+                position="bottom"></ptc-tooltip> </a>
+            <a href="#." alt="">
+            <ptc-tooltip text-display="inline" max-length="35" z-index="z-2" description="Premium Features"
+                position="bottom"></ptc-tooltip> </a>
+            <a href="#." alt="">
+            <ptc-tooltip text-display="inline" max-length="35" z-index="z-2" description="Ready to Buy?"
+                position="bottom"></ptc-tooltip> </a>
+        </ptc-nav-pills>
+        </div>
+    </section>
+
+    <section class="u-bg-gray-02">
+        <div class="ptc-container">
+        <div class="is-grid">
+            <div class="is-col-6-sm 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="">WEBINAR: What’s New in Mathcad Prime 9?</ptc-title>
+                <ptc-para font-size="small" font-weight="w-4" para-line-h="line-height-p"
+                para-margin="margin-3">Register for our tell-all webinar on what’s new in PTC Mathcad Prime 9, including demos and live Q&A with the product manager.
+                </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-6-sm min-height-300">
+            <ptc-img image-type="smart-bg" img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway">
+            </ptc-img>
+            </div>
+
+        </div>
+        </div>
+    </section>
+    <div class="ptc-container">
+    <div class="flex-grid-creo">
+      <ptc-card has-image="true" card-type="listing-card" card-href="http://www.google.com" heading="New Functionality in Mathcad Prime 9">
+        <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">Learn about the new functionality in the paid version of Mathcad Prime 9, 
+            such as the gradient operator, text styles, internal links, and more!
+          </ptc-para>
+        </div>
+      </ptc-card>
+      <ptc-card has-image="true" card-type="listing-card" card-href="http://www.google.com" heading="When to Move from Mathcad Express">
+        <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">Do you find yourself needing more than Mathcad Express’s basic capabilities?
+          </ptc-para>
+        </div>
+      </ptc-card>
+      <ptc-card has-image="true" card-type="listing-card" card-href="http://www.google.com" heading="Are you a Student?">
+        <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 offers deep discounts for students with academic IDs for the full version of PTC Mathcad.
+          </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" >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>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Media Kit Speed Bump/preview.stories.js

@@ -0,0 +1,39 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Media Kit Speed Bump'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container">
+    <ptc-card-wrapper card-type="speed-bump">
+      <ptc-card-content card-type="speed-bump" class="u-bg-white u-border-radius-large u-border-none u-shadow-x-small">
+        <div class="is-grid ">
+          <div class="is-col-12 is-row-1 is-col-9-md">
+            <ptc-title type="h4" title-weight="w-8" title-margin="margin-flush" upperline="no-upperline"
+              seo-compatibility-mode>
+              <h4>Media Resources and Media Kit</h4>
+            </ptc-title>
+            <ptc-spacer size="xx-small"></ptc-spacer>
+            <ptc-para font-size="xx-small" font-weight="w-5" para-margin="margin-flush"
+              para-line-h="line-height-densest" seo-compatibility-mode>
+              Media Kit, Press Contact, logos and more
+            </ptc-para>
+          </div>
+          <div class="is-col-12 is-row-1 is-col-3-md u-justify-self-end is-placed-center">
+            <ptc-button type="link" color="ptc-quaternary"  link-href="" button-title="" target="">
+              Learn More
+            </ptc-button>
+          </div>
+        </div>
+      </ptc-card-content>
+    </ptc-card-wrapper>
+  </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Most Popular News/preview.stories.js

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Most Popular News'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container">
+        <ptc-spacer></ptc-spacer>
+        <div class="is-grid">
+          <div class="is-col-12 is-col-9-lg">
+            placeholder
+          </div>
+          
+          <most-popular-news class="is-col-12 is-col-3-lg" top-title="Most Popular">
+            <h2 slot="seo-content">Most Popular</h2>
+          </most-popular-news>
+        </div>
+        <ptc-spacer></ptc-spacer>
+      </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();