@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

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

@@ -0,0 +1,394 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Partners Listing'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-hero hero-type="jumbotron" class="ptc-jumbotron jumbotron hydrated" bg-url="https://www.ptc.com/-/media/Images/Redesign/partners/16875_Hero_PartnerNetwork_header_image.png?h=314&w=1920&la=en&hash=D82ECF910761E67C22CD1808F350E246">
+        <div class="ptc-container">
+            <div class="is-grid">
+                <div class="is-col-12">
+                    <ptc-spacer size="xx-large" class="xx-large ptc-spacer-vertical hydrated"></ptc-spacer>
+                    <ptc-breadcrumb class="hydrated">
+                                <list-item list-type="breadcrumb" class="breadcrumb hydrated">Case Studies</list-item>
+                    </ptc-breadcrumb>
+                    <ptc-spacer size="large" class="large ptc-spacer-vertical hydrated"></ptc-spacer>
+                    <ptc-title type="h1" text-align="left" title-height="densest" is-plm-hub="" upperline="no-upperline" class="sc-ptc-title-h sc-ptc-title-s hydrated"><div class="left no-upperline is-plm-hub densest gray inline-block sc-ptc-title"><h1 class="sc-ptc-title sc-ptc-title-s">Find your Partner</h1></div></ptc-title>
+                        <ptc-spacer size="xx-large" class="xx-large ptc-spacer-vertical hydrated"></ptc-spacer>
+                        <max-width-container max-width="800" content-align="left">
+                            <ptc-para font-size="small" font-weight="w-7" para-margin="margin-flush" para-color="white" para-line-h="line-height-denser" class="is-col-12" style="z-index: 10; position: relative;">
+                                PTC Partner Network accelerates our customers’ ability to capitalize on physical digital convergence by providing a broad and capable ecosystem of complementary technologies, solutions and services that accelerate their design, development, implementation and production time for their solutions.
+                            </ptc-para>
+                        </max-width-container>
+                    <ptc-spacer size="xxxx-large" class="xxxx-large ptc-spacer-vertical hydrated"></ptc-spacer>
+                </div>
+            </div>
+        </div>
+    </ptc-hero>
+    <ptc-announcement link-text="Learn more"
+        link-url="http://www.ptc.com" bar-title="STRATEGIC ALLIANCES"
+        description="With unmatched expertise, PTC’s global Strategic Alliances mean business; Innovation and digital transformation lie just ahead."
+        visible>
+  </ptc-announcement>
+        <div class="ptc-container">
+            <ptc-spacer breakpoint="small" size="xxx-large"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+            <div class="is-grid">
+                <div class="is-col-12-xs is-col-3-lg is-col-4-xxxl">
+                  <ptc-collapse-list id="filter-component" placeholder-text="Search..." header="Filter Results" debounce-update-delay="300" class="hydrated">
+                    <collapse-list-item allow-multi-select="true" facet-display="By Technology">
+                            <collapse-list-item category="By Technology" facet-display="Augmented Reality" facet-value="a98730df-ed96-48ad-b4d6-44da78a04351">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Technology" facet-display="CAD" facet-value="40398f29-a804-42da-be3e-53f6f68d7b70">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Technology" facet-display="Industrial Connectivity" facet-value="6c6a3f22-341c-4858-b7a7-39b78b18e4da">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Technology" facet-display="Industrial Internet of Things" facet-value="2109fca4-5397-467f-b4ec-f79f1c106429">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Technology" facet-display="Product Lifecycle Management (PLM)" facet-value="d3294e51-119a-4cb6-a647-0671b42a5867">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Technology" facet-display="Service Lifecycle Management (SLM)" facet-value="ae21c21d-0842-4c7b-8a98-9efb7ed090df">
+                            </collapse-list-item>
+                    </collapse-list-item>
+                    <collapse-list-item allow-multi-select="true" facet-display="By Product" tooltip="The way in which a company partners with PTC<br><br>Solution Provider:  A Partner that resells or distributes PTC solutions     <br><br>System Integrator:  A partner that provides professional services around PTC solutions     <br><br>Technology Provider:  A partner that offers products and applications or technologies that complement PTC solutions     <br><br>Pre-built Solutions:  A partner that sells solutions or applications that are embedded or bundled with PTC technologies    <br><br>Training Partner: A partner that sells and delivers PTC University Training">
+                            <collapse-list-item category="By Product" facet-display="Arbortext" facet-value="db2a2bdd-03fd-4c1d-b328-dc26fdc60a1c">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Product" facet-display="Creo" facet-value="0044b091-1cc4-4233-b9ba-7cf8c0b70417">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Product" facet-display="Kepware" facet-value="3cfe05b0-2a5d-4f36-bdef-7c2b8de4f4b2">
+                                    <collapse-list-item category="By Product" facet-display="KEPServerEX" facet-value="76e24e39-158d-4de0-8f55-8e532ef3a914"></collapse-list-item>
+                            </collapse-list-item>
+                            <collapse-list-item category="By Product" facet-display="Arena" facet-value="85992824-2fa0-44f8-8f03-49241c1d460a">
+                                    <collapse-list-item category="By Product" facet-display="Arena PLM" facet-value="a28468dd-4629-414c-9e5e-98156f22cf27"></collapse-list-item>
+                                    <collapse-list-item category="By Product" facet-display="Arena PLM for AWS GovCloud" facet-value="11194783-a03d-450f-ab90-f019ba5d9fb9"></collapse-list-item>
+                                    <collapse-list-item category="By Product" facet-display="Arena QMS" facet-value="0930617d-2b0f-4631-be9b-8ab2f0563601"></collapse-list-item>
+                            </collapse-list-item>
+                            <collapse-list-item category="By Product" facet-display="Onshape" facet-value="1e9ea9b6-7e37-4325-a836-b5eee8495f77">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Product" facet-display="Service knowledge and Diagnostics" facet-value="6ae7f3ad-5e13-4a36-994e-a2820484daec">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Product" facet-display="Servigistics" facet-value="a11b55ed-a592-48bb-b59a-4c38cfb028d8">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Product" facet-display="Thingworx" facet-value="494224b5-3807-4ddb-925e-4ae762065d02">
+                                    <collapse-list-item category="By Product" facet-display="Navigate" facet-value="1e419bf5-eaf2-44e0-accb-647ca2020c82"></collapse-list-item>
+                            </collapse-list-item>
+                            <collapse-list-item category="By Product" facet-display="Vuforia" facet-value="0d184279-677f-42d0-8a39-2efb5373e19b">
+                                    <collapse-list-item category="By Product" facet-display="Chalk" facet-value="284c37f1-4991-45cc-82b3-8d9e1171f30d"></collapse-list-item>
+                                    <collapse-list-item category="By Product" facet-display="Engine" facet-value="7d0fa3bf-7ca2-478b-92f8-4c35eda928da"></collapse-list-item>
+                                    <collapse-list-item category="By Product" facet-display="Expert Capture" facet-value="9e38d273-4c00-4248-8c69-1c096fed263d"></collapse-list-item>
+                                    <collapse-list-item category="By Product" facet-display="Studio" facet-value="de96e9f5-0b36-4f79-8646-f5bce767f534"></collapse-list-item>
+                            </collapse-list-item>
+                            <collapse-list-item category="By Product" facet-display="Windchill" facet-value="c55bc969-a6ba-4569-a3db-793c05517a0f">
+                                    <collapse-list-item category="By Product" facet-display="Quality" facet-value="f53cc452-f5b4-4a02-b11e-33724e5008cc"></collapse-list-item>
+                            </collapse-list-item>
+                    </collapse-list-item>
+                    <collapse-list-item allow-multi-select="true" facet-display="By Industry"  tooltip="PTC business unit that represents a product and/or solution">
+                            <collapse-list-item category="By Industry" facet-display="Aerospace and Defense" facet-value="a79dafc9-29c2-4c6d-b7b5-6c0f36f43d81">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Industry" facet-display="Automotive" facet-value="46c1235c-8d77-4613-ae5f-8ba6a2491c50">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Industry" facet-display="Electronics and High-Tech" facet-value="e9fc6d40-d81f-4d8b-87a3-87436d32bc81">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Industry" facet-display="Industrial Equipment" facet-value="8195c7e5-45fe-42de-b426-84e8a7d1e3d2">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Industry" facet-display="Life Sciences" facet-value="f27c7c4d-09e9-4ed9-b0b3-08c9f6f7fe37">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Industry" facet-display="Oil and Gas" facet-value="8d450f80-e6fd-42aa-b704-abdf0bced254">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Industry" facet-display="Retail and Consumer Products" facet-value="4e26f691-daf8-4e86-87e8-eb25fa8ee194">
+                            </collapse-list-item>
+                            <collapse-list-item category="By Industry" facet-display="Software and Technology" facet-value="0c90cd79-a61e-4512-a0f9-a3d26f3d6a51">
+                            </collapse-list-item>
+                    </collapse-list-item>
+                <collapse-list-item enable-search="true" category="Areas" placeholder-text="Find a country..." tooltip="PTC business unit that represents a product and/or solution"
+                                    facet-display="Areas Served" facet-value="1f08b502-35b6-4ee9-a78c-9fb7045d72e2">
+                                    <collapse-list-item category="Areas" facet-display="China" facet-value="f2578406-b05e-4528-9069-955ac4ff935a"  facet-name="china"></collapse-list-item>
+                                    <collapse-list-item category="Areas" facet-display="Germany" facet-value="aa91e8e8-1e9b-44c3-8d89-7c4af3d20366" facet-name="germany"></collapse-list-item>
+                                    <collapse-list-item category="Areas" facet-display="USA" facet-value="bebbe5b3-1c4f-4a9e-bbad-22c49f74b2d5" facet-name="en">
+                                      <collapse-list-item category="Areas" facet-display="Massachusetts" facet-value="284w37f1-4991-45cc-82b3-8d9e1171f30d"></collapse-list-item>
+                                      <collapse-list-item category="Areas" facet-display="New Hampshire" facet-value="7f0fa3bf-7ca2-478b-92f8-4c35eda928da"></collapse-list-item>
+                                      <collapse-list-item category="Areas" facet-display="Vermont" facet-value="9e68d273-4c00-4248-8c69-1c096fed263d"></collapse-list-item>
+                                      <collapse-list-item category="Areas" facet-display="Maine" facet-value="de96e4f5-0b36-4f79-8646-f5bce767f534"></collapse-list-item>
+                                    </collapse-list-item>
+                                    <collapse-list-item category="Areas" facet-display="Spain" facet-value="f71b4414-1539-4da0-8e11-997974cc6eda" facet-name="es"></collapse-list-item>
+                                    <collapse-list-item category="Areas" facet-display="France" facet-value="6395b841-7d3a-486b-bb9c-6ae36c96551d" facet-name="Fr"></collapse-list-item>
+                                    <collapse-list-item category="Areas" facet-display="Italy" facet-value="8d9c2a94-f95b-4d8f-aae6-14b336be302f" facet-name="it"></collapse-list-item>
+                                    <collapse-list-item category="Areas" facet-display="Russian" facet-value="4ee114ed-8fd4-4af9-a457-3d5a43ec384e" facet-name="ru"></collapse-list-item>
+                                    <collapse-list-item category="Areas" facet-display="Taiwan" facet-value="9027e1b9-e17b-4bb2-9ca4-f16fbc67f8c7" facet-name="zh-tw"></collapse-list-item>
+                                    <collapse-list-item category="Areas" facet-display="Mexico" facet-value="5f22cb3d-165c-42d0-8533-cc4570d7d746" facet-name="ko"></collapse-list-item>
+                                    <collapse-list-item category="Areas" facet-display="Japan" facet-value="3de7cf78-a96c-4e4c-9c93-8a7299340cd7" facet-name="ja"></collapse-list-item>
+                </collapse-list-item>
+            </ptc-collapse-list>
+                </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 custom-grid-spacing results-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="case-studies-card"
+                                card-href="/docs/examples/partners-detail.html" target="_blank"
+                                heading="9altitudes-Econocap A/S">
+                                    <div slot="slot-image"  class="is-flex is-centered h-100">
+                                        <ptc-picture slot="slot-image" alt="image-test" src="https://ptc.file.force.com/servlet/servlet.ImageServer?id=0155A00000A7JP3QAN&oid=00DA0000000YLPa" 
+                                                 object-fit="cover" disable-resize="true"></ptc-picture>
+                                    </div>
+                                    <div slot="slot-description">
+                                        <div class="partner-card-desc">
+                                            <h5 class="description">Solution Provider</h5>
+                                            <h5 class="description">Support Provider</h5>
+                                            <h5 class="description">Training Provider</h5>
+                                            <div class="tags">
+                                                <div class="tag">ALM </div>
+                                                <div class="tag">AR </div>
+                                                <div class="tag">CAD </div>
+                                                <div class="tag">IoT </div>
+                                                <div class="tag">Mathcad </div>
+                                                <div class="tag">ONS </div>
+                                                <div class="tag">PLM </div>
+                                                <div class="tag">SLM </div>
+                                            </div>
+                                            <div class="divisions">
+                                                <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/Windchill-preferred.svg"  width="200" height="20" class="is-flex is-centered"
+                                                        object-fit="cover" disable-resize="true"></ptc-picture>
+                                            </div>
+                                        </div>
+                                    </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="case-studies-card"
+                                    card-href="/docs/examples/partners-detail.html"
+                                    heading="KALYPSO LLP">
+                                    <div slot="slot-image"  class="is-flex is-centered h-100">
+                                        <ptc-picture alt="image-test" src="https://ptc--c.na170.content.force.com/servlet/servlet.ImageServer?id=0156e00000BTJ5I&oid=00DA0000000YLPa&lastMod=1626962190000" 
+                                                     object-fit="cover" disable-resize="true"></ptc-picture>
+                                    </div>
+                                        <div slot="slot-description">
+                                            <div class="partner-card-desc">
+                                                <h5 class="description">Solution Provider</h5>
+                                                <div class="tags">
+                                                    <div class="tag">ALM </div>
+                                                    <div class="tag">PLM </div>
+                                                    <div class="tag">SLM </div>
+                                                </div>
+                                                <div class="divisions">
+                                                    <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/vuforia-advanced.svg" width="200" height="20" class="is-flex is-centered u-margin-md "
+                                                            object-fit="cover" disable-resize="true"></ptc-picture>
+                                                    <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/thingworx-advanced.svg"  width="200" height="20" class="is-flex is-centered u-margin-md "
+                                                            object-fit="cover" disable-resize="true"></ptc-picture>
+                                                    <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/Windchill-preferred.svg"  width="200" height="20" class="is-flex is-centered"
+                                                            object-fit="cover" disable-resize="true"></ptc-picture>
+                                                </div>
+                                            </div>
+                                        </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="case-studies-card"
+                                    card-href="/docs/examples/partners-detail.html"
+                                    heading="MAIT GERMANY GMBH" >
+                                        <div slot="slot-image"  class="is-flex is-centered h-100">
+                                            <ptc-picture alt="image-test" src="https://ptc--c.na49.content.force.com/servlet/servlet.ImageServer?id=0155A00000A7kz7&oid=00DA0000000YLPa&lastMod=1583318276000" 
+                                                         object-fit="cover" disable-resize="true"></ptc-picture>
+                                        </div>
+                                        <div slot="slot-description">
+                                            <div class="partner-card-desc">
+                                                <h5 class="description">Training Provider</h5>
+                                                <div class="tags">
+                                                    <div class="tag">Mathcad </div>
+                                                    <div class="tag">Thingworx </div>
+                                                    <div class="tag">PLM </div>
+                                                    <div class="tag">SLM </div>
+                                                </div>
+                                                <div class="divisions">
+                                                    <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/thingworx-advanced.svg"  width="200" height="20" class="is-flex is-centered"
+                                                            object-fit="cover" disable-resize="true"></ptc-picture>
+                                                </div>
+                                            </div>
+                                        </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="case-studies-card"
+                                    card-href="/docs/examples/partners-detail.html"
+                                    heading="9altitudes-Econocap A/S">
+                                        <div slot="slot-image"  class="is-flex is-centered h-100">
+                                            <ptc-picture slot="slot-image" alt="image-test" src="https://ptc.file.force.com/servlet/servlet.ImageServer?id=0155A00000A7JP3QAN&oid=00DA0000000YLPa" 
+                                                     object-fit="cover" disable-resize="true"></ptc-picture>
+                                        </div>
+                                        <div slot="slot-description">
+                                            <div class="partner-card-desc">
+                                                <h5 class="description">Solution Provider</h5>
+                                                <h5 class="description">Support Provider</h5>
+                                                <h5 class="description">Training Provider</h5>
+                                                <div class="tags">
+                                                    <div class="tag">ALM </div>
+                                                    <div class="tag">AR </div>
+                                                    <div class="tag">CAD </div>
+                                                    <div class="tag">IoT </div>
+                                                    <div class="tag">Mathcad </div>
+                                                    <div class="tag">ONS </div>
+                                                    <div class="tag">PLM </div>
+                                                    <div class="tag">SLM </div>
+                                                </div>
+                                                <div class="divisions">
+                                                    <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/Windchill-preferred.svg"  width="200" height="20" class="is-flex is-centered"
+                                                            object-fit="cover" disable-resize="true"></ptc-picture>
+                                                </div>
+                                            </div>
+                                        </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="case-studies-card"
+                                        card-href="/docs/examples/partners-detail.html"
+                                        heading="KALYPSO LLP">
+                                        <div slot="slot-image"  class="is-flex is-centered h-100">
+                                            <ptc-picture alt="image-test" src="https://ptc--c.na170.content.force.com/servlet/servlet.ImageServer?id=0156e00000BTJ5I&oid=00DA0000000YLPa&lastMod=1626962190000" 
+                                                         object-fit="cover" disable-resize="true"></ptc-picture>
+                                        </div>
+                                            <div slot="slot-description">
+                                                <div class="partner-card-desc">
+                                                    <h5 class="description">Solution Provider</h5>
+                                                    <div class="tags">
+                                                        <div class="tag">ALM </div>
+                                                        <div class="tag">PLM </div>
+                                                        <div class="tag">SLM </div>
+                                                    </div>
+                                                    <div class="divisions">
+                                                        <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/vuforia-advanced.svg" width="200" height="20" class="is-flex is-centered u-margin-md "
+                                                                object-fit="cover" disable-resize="true"></ptc-picture>
+                                                        <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/thingworx-advanced.svg"  width="200" height="20" class="is-flex is-centered u-margin-md "
+                                                                object-fit="cover" disable-resize="true"></ptc-picture>
+                                                        <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/Windchill-preferred.svg"  width="200" height="20" class="is-flex is-centered"
+                                                                object-fit="cover" disable-resize="true"></ptc-picture>
+                                                    </div>
+                                                </div>
+                                            </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="case-studies-card"
+                                        card-href="/docs/examples/partners-detail.html"
+                                        heading="MAIT GERMANY GMBH" >
+                                            <div slot="slot-image"  class="is-flex is-centered h-100">
+                                                <ptc-picture alt="image-test" src="https://ptc--c.na49.content.force.com/servlet/servlet.ImageServer?id=0155A00000A7kz7&oid=00DA0000000YLPa&lastMod=1583318276000" 
+                                                             object-fit="cover" disable-resize="true"></ptc-picture>
+                                            </div>
+                                            <div slot="slot-description">
+                                                <div class="partner-card-desc">
+                                                    <h5 class="description">Training Provider</h5>
+                                                    <div class="tags">
+                                                        <div class="tag">Mathcad </div>
+                                                        <div class="tag">Thingworx </div>
+                                                        <div class="tag">PLM </div>
+                                                        <div class="tag">SLM </div>
+                                                    </div>
+                                                    <div class="divisions">
+                                                        <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/thingworx-advanced.svg"  width="200" height="20" class="is-flex is-centered"
+                                                                object-fit="cover" disable-resize="true"></ptc-picture>
+                                                    </div>
+                                                </div>
+                                            </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="case-studies-card"
+                                        card-href="/docs/examples/partners-detail.html"
+                                        heading="9altitudes-Econocap A/S">
+                                            <div slot="slot-image"  class="is-flex is-centered h-100">
+                                                <ptc-picture slot="slot-image" alt="image-test" src="https://ptc.file.force.com/servlet/servlet.ImageServer?id=0155A00000A7JP3QAN&oid=00DA0000000YLPa" 
+                                                         object-fit="cover" disable-resize="true"></ptc-picture>
+                                            </div>
+                                            <div slot="slot-description">
+                                                <div class="partner-card-desc">
+                                                    <h5 class="description">Solution Provider</h5>
+                                                    <h5 class="description">Support Provider</h5>
+                                                    <h5 class="description">Training Provider</h5>
+                                                    <div class="tags">
+                                                        <div class="tag">ALM </div>
+                                                        <div class="tag">AR </div>
+                                                        <div class="tag">CAD </div>
+                                                        <div class="tag">IoT </div>
+                                                        <div class="tag">Mathcad </div>
+                                                        <div class="tag">ONS </div>
+                                                        <div class="tag">PLM </div>
+                                                        <div class="tag">SLM </div>
+                                                    </div>
+                                                    <div class="divisions">
+                                                        <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/Windchill-preferred.svg"  width="200" height="20" class="is-flex is-centered"
+                                                                object-fit="cover" disable-resize="true"></ptc-picture>
+                                                    </div>
+                                                </div>
+                                            </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="case-studies-card"
+                                            card-href="/docs/examples/partners-detail.html"
+                                            heading="KALYPSO LLP">
+                                            <div slot="slot-image"  class="is-flex is-centered h-100">
+                                                <ptc-picture alt="image-test" src="https://ptc--c.na170.content.force.com/servlet/servlet.ImageServer?id=0156e00000BTJ5I&oid=00DA0000000YLPa&lastMod=1626962190000" 
+                                                             object-fit="cover" disable-resize="true"></ptc-picture>
+                                            </div>
+                                                <div slot="slot-description">
+                                                    <div class="partner-card-desc">
+                                                        <h5 class="description">Solution Provider</h5>
+                                                        <div class="tags">
+                                                            <div class="tag">ALM </div>
+                                                            <div class="tag">PLM </div>
+                                                            <div class="tag">SLM </div>
+                                                        </div>
+                                                        <div class="divisions">
+                                                            <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/vuforia-advanced.svg" width="200" height="20" class="is-flex is-centered u-margin-md "
+                                                                    object-fit="cover" disable-resize="true"></ptc-picture>
+                                                            <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/thingworx-advanced.svg"  width="200" height="20" class="is-flex is-centered u-margin-md "
+                                                                    object-fit="cover" disable-resize="true"></ptc-picture>
+                                                            <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/Windchill-preferred.svg"  width="200" height="20" class="is-flex is-centered"
+                                                                    object-fit="cover" disable-resize="true"></ptc-picture>
+                                                        </div>
+                                                    </div>
+                                                </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="case-studies-card"
+                                            card-href="/docs/examples/partners-detail.html"
+                                            heading="MAIT GERMANY GMBH" >
+                                                <div slot="slot-image"  class="is-flex is-centered h-100">
+                                                    <ptc-picture alt="image-test" src="https://ptc--c.na49.content.force.com/servlet/servlet.ImageServer?id=0155A00000A7kz7&oid=00DA0000000YLPa&lastMod=1583318276000" 
+                                                                 object-fit="cover" disable-resize="true"></ptc-picture>
+                                                </div>
+                                                <div slot="slot-description">
+                                                    <div class="partner-card-desc">
+                                                        <h5 class="description">Training Provider</h5>
+                                                        <div class="tags">
+                                                            <div class="tag">Mathcad </div>
+                                                            <div class="tag">Thingworx </div>
+                                                            <div class="tag">PLM </div>
+                                                            <div class="tag">SLM </div>
+                                                        </div>
+                                                        <div class="divisions">
+                                                            <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/thingworx-advanced.svg"  width="200" height="20" class="is-flex is-centered"
+                                                                    object-fit="cover" disable-resize="true"></ptc-picture>
+                                                        </div>
+                                                    </div>
+                                                </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/Pdf Portal/preview.stories.js

@@ -0,0 +1,140 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Pdf Portal'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-jumbotron 
+      jumbotron-type="dark"
+      sub-title=""
+      bg-src="https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80"
+    >
+      
+      
+      <ptc-breadcrumb slot="breadcrumb" color="white" is-dark-mode>
+        <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="light-gray"> Partners </list-item>
+        <list-item list-type="breadcrumb" color="light-gray"> Contracts </list-item>
+      </ptc-breadcrumb>
+      <ptc-title 
+        slot="main-title"
+        type="h1"
+        upperline="no-upperline"
+        title-size="xxxx-large"
+        title-height="densest"
+        title-weight="w-8"
+        title-margin="margin-flush"
+        text-align="left"
+        title-color="gray-1"
+        >PTC Partner Network Contracts and Guides
+      </ptc-title>
+    </ptc-jumbotron>
+
+    <section class="ptc-section">
+      <div class="ptc-container">
+        <div class="is-grid has-row-gap-lg">
+          <div class="is-col-7-lg">
+            <ptc-title type="h2" upperline="no-upperline" title-margin="margin-flush" seo-compatibility-mode> <h2>Login</h2> </ptc-title>
+            <ptc-spacer></ptc-spacer>
+            <div class="pdf-portal-login-form">
+              <ptc-textfield 
+                disabled="false"
+                field-id="ptc-field-name"
+                helpertext="Please enter a value"
+                input-value=""
+                label-text="Email"
+                name="email"
+                ptc-data-eloqua-name="data-eloqua-name-value"
+                ptc-max-length="undefined"
+                required="true"
+                type="email"
+                placeholder-text="Login with your registered Email"
+              ></ptc-textfield>
+              <ptc-button 
+                color="ptc-quaternary"
+                disabled="false"
+                link-href="https://www.ptc.com"
+                link-title="PTC"
+                rel="undefined"
+                tab-nav="0"
+                target="_self"
+                text-align="undefined"
+                type="button"
+                >Login</ptc-button>
+            </div>
+          </div>
+          <div class="is-col-5-lg">
+            <ptc-title type="h2" upperline="no-upperline" title-margin="margin-flush" seo-compatibility-mode> <h2>Register</h2> </ptc-title>
+            <ptc-spacer></ptc-spacer>
+            <div class="pdf-portal-register-form">
+              <ptc-textfield 
+                disabled="false"
+                field-id="ptc-field-name"
+                helpertext="Please enter a value"
+                input-value=""
+                label-text="Email"
+                name="email"
+                ptc-data-eloqua-name="data-eloqua-name-value"
+                ptc-max-length="undefined"
+                required="true"
+                type="email"
+                placeholder-text="Provide your Email"
+              ></ptc-textfield>
+
+              <ptc-form-checkbox 
+                checkbox-id="Checkbox1"
+                helpertext="This field is required"
+                is-checked="false"
+                label="Complement Engagement"
+                name="Complement Engagement"
+                is-required="false"
+              ></ptc-form-checkbox>
+              <ptc-form-checkbox 
+                checkbox-id="Checkbox2"
+                helpertext="This field is required"
+                is-checked="false"
+                label="Sell Engagement"
+                name="Sell Engagement"
+                is-required="false"
+              ></ptc-form-checkbox>
+              <ptc-form-checkbox 
+                checkbox-id="Checkbox3"
+                helpertext="This field is required"
+                is-checked="false"
+                label="Services Engagement"
+                name="Services Engagement"
+                is-required="false"
+              ></ptc-form-checkbox>
+              <ptc-form-checkbox 
+                checkbox-id="Checkbox4"
+                helpertext="This field is required"
+                is-checked="false"
+                label="OEM Engagement"
+                name="OEM Engagement"
+                is-required="false"
+              ></ptc-form-checkbox>
+
+              <ptc-button 
+                color="ptc-quaternary"
+                disabled="false"
+                link-href="https://www.ptc.com"
+                link-title="PTC"
+                rel="undefined"
+                tab-nav="0"
+                target="_self"
+                text-align="undefined"
+                type="button"
+                >Register</ptc-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();