@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/Value Led Resource/preview.stories.js

@@ -0,0 +1,479 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Value Led Resource'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-value-led-layout top-background-image="https://www.ptc.com/-/media/Images/Case-Studies/cs-schneider-electric-1366x500.jpg">
+      <div slot="pdf-slot">
+        <ptc-button 
+          button-title="Download PDF"
+          type="link"
+          color="ptc-quaternary"
+          link-href="https://www.ptc.com"
+          target="_blank"
+          styles="a{ background: rgba(0, 0, 0, 0.54) !important; border:none !important} a>span{ display: flex;
+          align-items: center;}"
+          icon-position="icon-right"
+          size="small"
+          ><span class="btn-text">Download PDF </span><span slot="slot-after-text"
+            ><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <mask id="mask0_158_19" style="mask-type: luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+                <path d="M20 0H0V20H20V0Z" fill="white" ></path>
+              </mask>
+              <g mask="url(#mask0_158_19)">
+                <path d="M20 17.627H0V20.127H20V17.627Z" fill="white" ></path>
+                <path d="M12.3749 6V0.5V0H7.37491V6H2.99991L9.87491 15.125L16.7499 6H12.3749Z" fill="white" ></path>
+              </g></svg></span></ptc-button>
+      </div>
+
+      
+
+      <ptc-value-led-content class="vl-content-item" content-tag="White Paper" id="test1">
+        <div slot="vl-content-title" class="test-red">
+          <ptc-title seo-compatibility-mode upperline="no-upperline" title-height="densest" title-margin="margin-flush">
+            <h1>Secure OT Net'works through Industrial Connectivity Before Disaster Strikes</h1>
+          </ptc-title>
+        </div>
+        <div class="vl-rich-content">
+          <p>
+            Lorem ipsum dolor sit amet consectetur. <a href="#">AI innovation in CAD </a> Sit eget at feugiat dignissim id tristique tempor sapien.Egestas interdum pharetra felis
+            scelerisque et dignissim sit. Eleifend quis pellentesque lectus enim elit imperdiet elit mus semper. Ac morbi libero nisl quis porttitor dui aenean interdum nam. Nisl
+            nunc sit ullamcorper commodo nec ultrices posuere eleifend pellentesque.
+          </p>
+        </div>
+      </ptc-value-led-content>
+      <ptc-value-led-content class="vl-content-item" id="test2">
+        <div slot="vl-content-title" class="test-red">
+          <ptc-title seo-compatibility-mode upperline="no-upperline" title-height="densest" title-margin="margin-flush">
+            <h2>Sed Egestas Amet Cras Mattis Odio Sed Egestas Amet Cras Mattis Odio Sed Egestas Amet Cras Mattis Odio</h2>
+          </ptc-title>
+        </div>
+        <div class="vl-rich-content">
+          <h3>Ornare Elit Convallis Arcu</h3>
+          <p>
+            Et auctor sagittis odio etiam tincidu<a href="#">AI innovation in CAD </a>nt senectus mi fermentum. Pharetra ut nibh orci in consequat orci nunc. Tellus ullamcorper
+            nunc aliquam odio consectetur sem cursus arcu in. Turpis tempus egestas nunc suspendisse id habitant arcu eu. Cursus nascetur sit sem amet. Fringilla mattis elementum
+            consequat dictumst ac. Sed bibendum morbi quisque sem adipiscing aliquam facilisis auctor eu. At egestas laoreet porttitor turpis facilisis sem sed eros justo. Tellus
+            dictum mattis adipiscing tempor pellentesque eu enim nunc facilisi. Ut tincidunt arcu purus commodo dolor. Arcu tortor dignissim risus nisl mauris convallis dictum in.
+            Feugiat sit non nec sit sit. Nec egestas ipsum velit quam eget in vitae. Velit.
+          </p>
+          <h3>Tellus Dictum Mattis</h3>
+          <p>
+            Tincidunt senectus mi fermentum. Pharetra ut nibh orci in consequat orci nunc. Tellus ullamcorper nunc aliquam odio consectetur sem cursus arcu in. Turpis tempus
+            egestas nunc suspendisse id habitant arcu eu. Cursus nascetur sit sem amet. Fringilla mattis elementum consequat dictumst ac. Sed bibendum morbi quisque sem adipiscing
+            aliquam facilisis auctor eu. At egestas laoreet porttitor turpis facilisis sem sed eros justo. Tellus dictum mattis adipiscing tempor pellentesque eu enim nunc
+            facilisi. Ut tincidunt arcu purus commodo dolor.
+          </p>
+          <h3>Laoreet Porttitor Turpis Facilisis Sem</h3>
+          <p>
+            At egestas laoreet porttitor turpis facilisis sem sed eros justo. Tellus dictum mattis adipiscing tempor pellentesque eu enim nunc facilisi. Ut tincidunt arcu purus
+            commodo dolor. Arcu tortor dignissim risus nisl mauris convallis dictum in. Feugiat sit non nec sit sit. Nec egestas ipsum velit quam eget in vitae. Velit.
+          </p>
+        </div>
+      </ptc-value-led-content>
+
+      <ptc-quote quote-type="value-led-quote" quote-name="Ernestine Tiongson, Business Rotational Development Program">
+        “My PTC experience has been defined by oppo<a href="#">AI innovation in CAD </a>rtunities to take something and run with it. I’ve received great support from my leadership
+        and peers when it comes to contributing perspective, taking initiative, and making an impact. This wasn't something I was expecting coming to the organization right out of
+        school.”
+      </ptc-quote>
+
+      <ptc-value-led-content class="vl-content-item" id="test3">
+        <div slot="vl-content-title" class="test-red">
+          <ptc-title seo-compatibility-mode upperline="no-upperline" title-height="densest" title-margin="margin-flush">
+            <h2>Dictum a Pellentesque Semper Nam Ornare Elit Convallis Nibh</h2>
+          </ptc-title>
+        </div>
+        <div class="vl-rich-content">
+          <p>
+            Et auctor sagittis odio etiam tincidunt senectus mi fermentum. Pharetra ut nibh orci in consequat orci nunc. Tellus ullamcorper nunc aliquam odio consectetur sem cursus
+            arcu in. Turpis tempus egestas nunc suspendisse id habitant arcu eu. Cursus nascetur sit s<a href="#">AI innovation in CAD </a>em amet. Fringilla mattis elementum
+            consequat dictumst ac. Sed bibendum morbi quisque sem adipiscing aliquam facilisis auctor eu. At egestas laoreet porttitor turpis facilisis sem sed eros justo. Tellus
+            dictum mattis adipiscing tempor pellentesque eu enim nunc facilisi. Ut tincidunt arcu purus commodo dolor. Arcu tortor dignissim risus nisl mauris convallis dictum in.
+            Feugiat sit non nec sit sit. Nec egestas ipsum velit quam eget in vitae. Velit.
+          </p>
+          <img 
+            alt="Tech-Clarity Buyer’s Guide: Confidently Prioritize Manufacturing Productivity Improvements"
+            src="https://www-staging.ptc.com/-/media/Images/new-org/750x500/iot/form-content-page-confident-750x500.ashx"
+          >
+        </div>
+        <ptc-picture 
+          src="https://www.ptc.com/-/media/Images/blog/post/ar-blog/top-augmented-reality-applications-in-the-automotive-industry-900x450.jpg"
+          alt="top augmented reality applications in the automotive industry"
+        >
+        </ptc-picture>
+      </ptc-value-led-content>
+      <ptc-value-led-content class="vl-content-item" id="test4">
+        <div slot="vl-content-title" class="test-red">
+          <ptc-title seo-compatibility-mode upperline="no-upperline" title-height="densest" title-margin="margin-flush">
+            <h2>Sed Egestas Amet Cras Mattis Odio</h2>
+          </ptc-title>
+        </div>
+        <div class="vl-rich-content">
+          <p>
+            Et auctor sagittis odio etiam tincidunt senectus mi fermentum. Pharetra ut nibh orci in consequat orci nunc. Tellus ullamcorper nunc aliquam odio consectetur sem cursus
+            arcu in. Turpis tempus egestas nunc suspendisse id habitant arcu eu. Cursus nascetur sit sem amet. Fringilla mattis elementum consequat dictumst ac. Sed bibendum morbi
+            quisque sem adipiscing aliquam facilisis auctor eu. At egestas laoreet porttitor turpis facilisis sem sed eros justo. Tellus dictum mattis adipiscing tempor
+            pellentesque eu enim nunc facilisi. Ut tincidunt arcu purus commodo dolor. Arcu tortor dignissim risus nisl mauris convallis dictum in. Feugiat sit non nec sit sit. Nec
+            egestas ipsum velit quam eget in vitae. Velit.
+          </p>
+        </div>
+      </ptc-value-led-content>
+      <section id="brightcove-video-embed" class="ptc-section video-embad-container-value-led-class">
+        <div class="ptc-container">
+          <ptc-title 
+            seo-compatibility-mode
+            text-align="left"
+            title-size="xx-large"
+            title-color="gray"
+            upperline="dotted"
+            title-display="inline-block"
+            title-shadow=""
+            title-height="densest"
+            title-margin="margin-2"
+            title-weight="w-8"
+            is-plm-hub="false"
+          >
+            Brightcove video embed
+          </ptc-title>
+          <div data-experience="655e10d2ce14194d14df171b"></div>
+          <script src="https://players.brightcove.net/1532789042001/experience_655e10d2ce14194d14df171b/live.js"></script>
+        </div>
+      </section>
+
+      <ptc-value-led-speed-bump 
+        card-title="Tellus Ullamcorper Nunc Aliquam odio Consectetur"
+        card-image="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/1888093ab0af4f79a352bf4536e488ba?v=356e6f40"
+      >
+        <ptc-tooltip 
+          max-length="160"
+          no-overflow="true"
+          description=" morbi quisque sem adipiscing aliquam facilisis auctor eu. At egestas laoreet porttitor turpis facilisis sem
+      sed eros justo. Tellus about dictum mattis adipiscing tempor pellentesque eu enim nunc facilisi. Ut tincidunt arcu
+      purus commodo dolor. Arcu tortor dignissim risus nisl mauris convallis dictum in."
+        >
+        </ptc-tooltip>
+
+        <div slot="cta-slot">
+          <ptc-button color="ptc-quaternary" link-href="https://www.ptc.com" link-title="PTC" text-align="center" rel="undefined" target="_blank" type="button" size="small"
+            >Read more</ptc-button>
+        </div>
+      </ptc-value-led-speed-bump>
+
+      <ptc-value-led-content class="vl-content-item" comp-title="ectus mi fermentum. Pharetra ut nibh orci in" id="test5">
+        <div slot="vl-content-title" class="test-red">
+          <ptc-title type="h2" upperline="no-upperline" title-height="densest" title-margin="margin-flush">
+            <ptc-tooltip max-length="70" description="ectus mi fermentum. Pharetra ut nibh orci in"></ptc-tooltip>
+          </ptc-title>
+        </div>
+        <div class="vl-rich-content">
+          <p>
+            Et auctor sagittis odio etiam tincidunt senectus mi fermentum. Pharetra ut nibh orci in consequat orci nunc. Tellus ullamcorper nunc aliquam odio consectetur sem cursus
+            arcu in. Turpis tempus egestas nunc suspendisse id habitant arcu eu. Cursus n<a href="#">AI innovation in CAD </a>ascetur sit sem amet. Fringilla mattis elementum
+            consequat dictumst ac. Sed bibendum morbi quisque sem adipiscing aliquam facilisis auctor eu. At egestas laoreet porttitor turpis facilisis sem sed eros justo. Tellus
+            dictum mattis adipiscing tempor pellentesque eu enim nunc facilisi. Ut tincidunt arcu purus commodo dolor. Arcu tortor dignissim risus nisl mauris convallis dictum in.
+            Feugiat sit non nec sit sit. Nec egestas ipsum velit quam eget in vitae. Velit.
+          </p>
+        </div>
+      </ptc-value-led-content>
+      <ptc-value-led-content-highlight>
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Sit eget at feugiat dignissim id tristique tempor sapien. Egestas interdum pharetra felis scelerisque et dignissim sit. Eleifend
+          quis pellentesque lectus enim elit imperdiet elit mus semper. Ac morbi libero nisl quis porttitor dui aenean interdum nam. Nisl nunc sit ullamcorper commodo nec ultrices
+          posuere eleifend pellentesque.
+        </p>
+      </ptc-value-led-content-highlight>
+
+      <ptc-value-led-content class="vl-content-item" comp-title="auctor sagittis odio etiam tincidunt senectus mi fermentu" id="test6">
+        <div slot="vl-content-title" class="test-red">
+          <ptc-title type="h2" upperline="no-upperline" title-height="densest" title-margin="margin-flush">
+            <ptc-tooltip max-length="70" description="auctor sagittis odio etiam tincidunt senectus mi fermentu"></ptc-tooltip>
+          </ptc-title>
+        </div>
+        <div class="vl-rich-content">
+          <p>
+            Et auctor sagittis odio etiam tincidunt senectus mi fermentum. Pharetra ut nibh orci in consequat orci nunc. Tellus ullamcorper nunc aliquam odio consectetur sem cursus
+            arcu in. Turpis tempus egestas nunc suspendisse id habitant arcu eu. Cursus nascetur sit sem amet. Fringilla mattis elementum consequat dictumst ac. Sed bibendum morbi
+            quisque sem adipiscing aliquam facilisis auctor eu. At egestas laoreet porttitor turpis facilisis sem sed eros justo. Tellus dictum mattis adipiscing tempor
+            pellentesque eu enim nunc facilisi. Ut tincidunt arcu purus commodo dolor. Arcu tortor dignissim risus nisl mauris convallis dictum in. Feugiat sit non nec sit sit. Nec
+            egestas ipsum velit quam eget in vitae. Velit.
+          </p>
+        </div>
+      </ptc-value-led-content>
+      <ptc-value-led-content-highlight>
+        <ul>
+          <li>Lorem ipsum dolor sit amet consectetur. Sit eget at feugiat d</li>
+          <li>interdum pharetra felis scelerisque et dignissim sit. Eleifend quis</li>
+          <li>commodo nec ultrices posuere eleifend pellentesque.</li>
+          <li>Lorem ipsum dolor sit amet consectetur. Sit eget at feugiat d</li>
+          <li>interdum pharetra felis scelerisque et dignissim sit. Eleifend quis</li>
+          <li>commodo nec ultrices posuere eleifend pellentesque.</li>
+        </ul>
+      </ptc-value-led-content-highlight>
+      <ptc-value-led-content class="vl-content-item" comp-title="em adipiscing aliquam facilisis auctor eu" id="test7">
+        <div slot="vl-content-title" class="test-red">
+          <ptc-title type="h2" upperline="no-upperline" title-height="densest" title-margin="margin-flush">
+            <ptc-tooltip max-length="70" description="em adipiscing aliquam facilisis auctor eu"></ptc-tooltip>
+          </ptc-title>
+        </div>
+        <div class="vl-rich-content">
+          <p>
+            Et auctor sagittis odio etiam tincidunt senectus mi fermentum. Pharetra ut nibh orci in consequat orci nunc. Tellus ullamcorper nunc aliquam odio consectetur sem cursus
+            arcu in. Turpis tempus egestas nunc suspendisse id habitant arcu eu. Cursus nascetur sit sem amet. Fringilla mattis elementum consequat dictumst ac. Sed bibendum morbi
+            quisque sem adipiscing aliquam facilisis auctor eu. At egestas laoreet porttitor turpis facilisis sem sed eros justo. Tellus dictum mattis adipiscing tempor
+            pellentesque eu enim nunc facilisi. Ut tincidunt arcu purus commodo dolor. Arcu tortor dignissim risus nisl mauris convallis dictum in. Feugiat sit non nec sit sit. Nec
+            egestas ipsum velit quam eget in vitae. Velit.
+          </p>
+        </div>
+      </ptc-value-led-content>
+
+      <ptc-value-led-card card-image="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/3d786f4f43e54233ba75f3904ca2ded3?v=28126f3f">
+        <ptc-title 
+          seo-compatibility-mode
+          type="h3"
+          title-size="large"
+          title-color="gray"
+          upperline="no-upperline"
+          title-display="inline-block"
+          title-height="densest"
+          title-margin="margin-flush"
+          title-weight="w-7"
+          slot="card-title"
+        >
+          <h3>Up Next Tellus Ullamcorper Nunc Aliquam odio Consectetur</h3></ptc-title>
+        <ptc-para size="small" para-line-h="line-height-p" para-margin="margin-bottom-4"
+          >Cursus <a href="#">AI innovation in CAD </a>nascetur sit sem amet. Fringilla mattis elementum consequat dictumst ac. Sed bibendum morbi quisque sem adipiscing aliquam
+          facilisis auctor eu. At egestas laoreet porttitor turpis facilisis sem sed eros justo. Tellus dictum mattis adipiscing tempor pellentesque eu enim nunc
+          facilisi.</ptc-para>
+        <ptc-button color="ptc-quaternary" link-href="https://www.ptc.com" link-title="PTC" target="_self" type="button">Read More</ptc-button>
+      </ptc-value-led-card>
+    </ptc-value-led-layout>
+
+    <div class="ptc-container ptc-section-standard">
+      <div class="is-grid has-col-6 has-col-12-xs has-col-gap-lg has-row-gap-lg">
+        <div class="is-col-6 is-col-12-xs is-col-4-md u-justify-self-stretch">
+          <ptc-card has-image="true" card-type="related-card" card-href="http://www.google.com" ribbon-text="eBook">
+            <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"
+              border-radius="radius-standard-top"
+            ></ptc-img>
+            <div slot="slot-description">
+              <ptc-title 
+                type="h3"
+                title-size="medium"
+                title-weight="w-6"
+                title-height="line-height-densest"
+                title-margin="margin-flush"
+                upperline="no-upperline"
+                title-color="gray-darker"
+              >
+                <ptc-tooltip description="Join us for live. " text-lines="3" z-index="z-3"> </ptc-tooltip>
+              </ptc-title>
+              <ptc-spacer breakpoint="x-small" size="small"></ptc-spacer>
+              <ptc-spacer breakpoint="small" size="x-small"></ptc-spacer>
+              <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-densest" para-margin="margin-flush" para-z-index="z-auto" para-color="gray-darker">
+                <ptc-tooltip description="Lörem ipsum deling." text-lines="4" z-index="z-auto"> </ptc-tooltip>
+              </ptc-para>
+            </div>
+          </ptc-card>
+        </div>
+        <div class="is-col-6 is-col-12-xs is-col-4-md u-justify-self-stretch">
+          <ptc-card has-image="true" card-type="related-card" card-href="http://www.google.com" ribbon-text="eBook">
+            <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"
+              border-radius="radius-standard-top"
+            ></ptc-img>
+            <div slot="slot-description">
+              <ptc-title 
+                type="h3"
+                title-size="medium"
+                title-weight="w-6"
+                title-height="line-height-densest"
+                title-margin="margin-flush"
+                upperline="no-upperline"
+                title-color="gray-darker"
+              >
+                <ptc-tooltip 
+                  description="Join us for live presentations and hear about the latest updates for Creo, Windchill PLM, and Thingworx IOT and Augmented Reality."
+                  text-lines="3"
+                  z-index="z-3"
+                >
+                </ptc-tooltip>
+              </ptc-title>
+              <ptc-spacer breakpoint="x-small" size="small"></ptc-spacer>
+              <ptc-spacer breakpoint="small" size="x-small"></ptc-spacer>
+              <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-densest" para-margin="margin-flush" para-z-index="z-auto" para-color="gray-darker">
+                <ptc-tooltip 
+                  description="Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter. Preliga posaling dektigt. Adepiv nehet sperar inte eur, ad.Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter."
+                  text-lines="4"
+                  z-index="z-auto"
+                >
+                </ptc-tooltip>
+              </ptc-para>
+            </div>
+          </ptc-card>
+        </div>
+        <div class="is-col-6 is-col-12-xs is-col-4-md u-justify-self-stretch">
+          <ptc-card has-image="true" card-type="related-card" card-href="http://www.google.com" ribbon-text="Corporate Update">
+            <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"
+              border-radius="radius-standard-top"
+            ></ptc-img>
+            <div slot="slot-description">
+              <ptc-title 
+                type="h3"
+                title-size="medium"
+                title-weight="w-6"
+                title-height="line-height-densest"
+                title-margin="margin-flush"
+                upperline="no-upperline"
+                title-color="gray-darker"
+              >
+                <ptc-tooltip 
+                  description="Join us for live presentations and hear about the latest updates for Creo, Windchill PLM, and Thingworx IOT and Augmented Reality."
+                  text-lines="3"
+                  z-index="z-3"
+                >
+                </ptc-tooltip>
+              </ptc-title>
+              <ptc-spacer breakpoint="x-small" size="small"></ptc-spacer>
+              <ptc-spacer breakpoint="small" size="x-small"></ptc-spacer>
+              <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-densest" para-margin="margin-flush" para-z-index="z-auto" para-color="gray-darker">
+                <ptc-tooltip 
+                  description="Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter. Preliga posaling dektigt. Adepiv nehet sperar inte eur, ad.Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter."
+                  text-lines="4"
+                  z-index="z-auto"
+                >
+                </ptc-tooltip>
+              </ptc-para>
+            </div>
+          </ptc-card>
+        </div>
+        <div class="is-col-6 is-col-12-xs is-col-4-md u-justify-self-stretch">
+          <ptc-card has-image="true" card-type="related-card" card-href="http://www.google.com" ribbon-text="eBook">
+            <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"
+              border-radius="radius-standard-top"
+            ></ptc-img>
+            <div slot="slot-description">
+              <ptc-title 
+                type="h3"
+                title-size="medium"
+                title-weight="w-6"
+                title-height="line-height-densest"
+                title-margin="margin-flush"
+                upperline="no-upperline"
+                title-color="gray-darker"
+              >
+                <ptc-tooltip description="Join us for live. " text-lines="3" z-index="z-3"> </ptc-tooltip>
+              </ptc-title>
+              <ptc-spacer breakpoint="x-small" size="small"></ptc-spacer>
+              <ptc-spacer breakpoint="small" size="x-small"></ptc-spacer>
+              <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-densest" para-margin="margin-flush" para-z-index="z-auto" para-color="gray-darker">
+                <ptc-tooltip description="Lörem ipsum deling." text-lines="4" z-index="z-auto"> </ptc-tooltip>
+              </ptc-para>
+            </div>
+          </ptc-card>
+        </div>
+        <div class="is-col-6 is-col-12-xs is-col-4-md u-justify-self-stretch">
+          <ptc-card has-image="true" card-type="related-card" card-href="http://www.google.com" ribbon-text="eBook">
+            <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"
+              border-radius="radius-standard-top"
+            ></ptc-img>
+            <div slot="slot-description">
+              <ptc-title 
+                type="h3"
+                title-size="medium"
+                title-weight="w-6"
+                title-height="line-height-densest"
+                title-margin="margin-flush"
+                upperline="no-upperline"
+                title-color="gray-darker"
+              >
+                <ptc-tooltip 
+                  description="Join us for live presentations and hear about the latest updates for Creo, Windchill PLM, and Thingworx IOT and Augmented Reality."
+                  text-lines="3"
+                  z-index="z-3"
+                >
+                </ptc-tooltip>
+              </ptc-title>
+              <ptc-spacer breakpoint="x-small" size="small"></ptc-spacer>
+              <ptc-spacer breakpoint="small" size="x-small"></ptc-spacer>
+              <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-densest" para-margin="margin-flush" para-z-index="z-auto" para-color="gray-darker">
+                <ptc-tooltip 
+                  description="Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter. Preliga posaling dektigt. Adepiv nehet sperar inte eur, ad.Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter."
+                  text-lines="4"
+                  z-index="z-auto"
+                >
+                </ptc-tooltip>
+              </ptc-para>
+            </div>
+          </ptc-card>
+        </div>
+        <div class="is-col-6 is-col-12-xs is-col-4-md u-justify-self-stretch">
+          <ptc-card has-image="true" card-type="related-card" card-href="http://www.google.com" ribbon-text="Corporate Update">
+            <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"
+              border-radius="radius-standard-top"
+            ></ptc-img>
+            <div slot="slot-description">
+              <ptc-title 
+                type="h3"
+                title-size="medium"
+                title-weight="w-6"
+                title-height="line-height-densest"
+                title-margin="margin-flush"
+                upperline="no-upperline"
+                title-color="gray-darker"
+              >
+                <ptc-tooltip 
+                  description="Join us for live presentations and hear about the latest updates for Creo, Windchill PLM, and Thingworx IOT and Augmented Reality."
+                  text-lines="3"
+                  z-index="z-3"
+                >
+                </ptc-tooltip>
+              </ptc-title>
+              <ptc-spacer breakpoint="x-small" size="small"></ptc-spacer>
+              <ptc-spacer breakpoint="small" size="x-small"></ptc-spacer>
+              <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-densest" para-margin="margin-flush" para-z-index="z-auto" para-color="gray-darker">
+                <ptc-tooltip 
+                  description="Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter. Preliga posaling dektigt. Adepiv nehet sperar inte eur, ad.Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter."
+                  text-lines="4"
+                  z-index="z-auto"
+                >
+                </ptc-tooltip>
+              </ptc-para>
+            </div>
+          </ptc-card>
+        </div>
+      </div>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Volvo Three Col/preview.stories.js

@@ -0,0 +1,115 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Volvo Three Col'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        .border-box {
+            border: 1px solid #eee
+        }
+
+        .pic-content {
+            padding-top: 44px;
+            border-right: 1px solid #eee
+        }
+
+        .right-box {
+            padding-top: 44px;
+        }
+
+        .content-wrapper {
+            margin-right: 24px;
+            margin-left: 24px;
+        }
+
+        .link-wrapper {
+            margin-top: unset;
+            margin-left: 20px;
+        }
+    </style>
+<style media="all and (min-width: 992px)">
+        .content-wrapper {
+            margin-right: 40px;
+            margin-left: 32px;
+        }
+
+        .link-wrapper {
+            margin-top: 10px;
+        }
+    </style>
+<div class="ptc-container ptc-section-standard">
+
+        <div class="is-grid has-no-col-gap border-box">
+            <div class="pic-content is-col-12 is-col-3-lg">
+                <ptc-picture alt="image-test"
+                    src="https://www.ptc.com/-/media/Images/Case-Studies/logos/volvo-construction-equipment-logo.ashx?la=en&hash=8FDB01609051B044A16DBFFEF5DDDB97"
+                    width="261" height="86" styles=":host{padding:32px;}"></ptc-picture>
+            </div>
+            <div class="is-col-12 is-col-9-lg right-box">
+                <div class="text-content is-grid has-no-col-gap">
+                    <div class="content-wrapper is-col-12 is-col-8-lg">
+                        
+                        <ptc-title upperline="no-upperline" type="h2" title-weight="w-7" title-size="large" title-margin="margin-flush">
+                            Solution: Advancing its technology agenda
+                        </ptc-title>
+                        <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                        <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                        <ptc-para title-weight="w-4" font-size="small" para-margin="margin-bottom-5" para-line-h="line-height-p">
+                            Windchill enables a collaborative environment cross-functionally and cross-regionally within
+                            Whirlpool Corporation. The company can connect information from its appliances to the
+                            ThingWorx
+                            platform and feed that information back into the PLM environment for a closed-loop system.
+                            By
+                            creating a feedback loop of information, designers are empowered to build and modify
+                            products
+                            that
+                            better satisfy consumer needs.
+                        </ptc-para>
+                        <ptc-para title-weight="w-4" font-size="small" para-margin="margin-bottom-5" para-line-h="line-height-p">
+                            Windchill enables a collaborative environment cross-functionally and cross-regionally within
+                            Whirlpool Corporation. The company can connect information from its appliances to the
+                            ThingWorx
+                            platform and feed that information back into the PLM environment for a closed-loop system.
+                            By
+                            creating a feedback loop of information, designers are empowered to build and modify
+                            products
+                            that
+                            better satisfy consumer needs.
+                        </ptc-para>
+                        <ptc-para title-weight="w-4" font-size="small" para-margin="margin-bottom-5" para-line-h="line-height-p">
+                            Windchill enables a collaborative environment cross-functionally and cross-regionally within
+                            Whirlpool Corporation. The company can connect information from its appliances to the
+                            ThingWorx
+                            platform and feed that information back into the PLM environment for a closed-loop system.
+                            By
+                            creating a feedback loop of information, designers are empowered to build and modify
+                            products
+                            that
+                            better satisfy consumer needs.
+                        </ptc-para>
+                        
+                    </div>
+                    <div class="link-wrapper is-col-12 is-col-4-lg">
+                        <ul>
+                            <list-item list-type="list-green" link-href="https://www.ptc.com">Change and Configuration
+                                Management</list-item>
+                            <list-item list-type="list-green" link-href="https://www.ptc.com">BOM Management</list-item>
+                            <list-item list-type="list-green" link-href="https://www.ptc.com">please update hte
+                                href&title and remove external for real site</list-item>
+                        </ul>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Vuforia Quiz/preview.stories.js

@@ -0,0 +1,26 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Vuforia Quiz'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container">
+    <br>
+    
+    <ptc-embedded-quiz get-quiz-endpoint="https://wwwdev1.ptc.com/en/SmartbeansArea/EmbeddedQuiz/GetQuiz?modelid=2BFF92C7-AF0E-407B-848B-C502C32F80EB"></ptc-embedded-quiz>
+  </div>
+<script type="text/javascript">
+  let ptcQuizComponent = document.querySelector('ptc-embedded-quiz');
+  ptcQuizComponent.addEventListener("optionClick", (e) => {
+    // Edit this function with additional operations to be triggered when a radio-input of the quiz is clicked.
+    let eventDetails = e.detail;
+  });
+</script>
+  `;
+};
+
+export const Preview = AlertsPage.bind();