npm - @ptcwebops/ptcw-design - Versions diffs - 6.3.32-beta → 6.3.32 - Mend

@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (421) hide show

package/dist/collection/stories/organisms/ptc/Hub Of Hubs/preview.stories.js ADDED Viewed

@@ -0,0 +1,417 @@
+import { html } from 'lit';
+export default {
+  title: 'Organisms/ptc/Hub Of Hubs'
+};
+const AlertsPage = args => {
+  return html`
+<style>
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: var(--color-gray-12);
+    }
+    @media only screen and (min-width: 1200px) {
+      .has-col-gap-md {
+        grid-column-gap: 32px;
+      }
+      .has-row-gap-md {
+        grid-row-gap: 32px;
+      }
+    }
+    @media only screen and (min-width: 1440px) {
+      .has-col-gap-md {
+        grid-column-gap: 40px;
+      }
+      .has-row-gap-md {
+        grid-row-gap: 40px;
+      }
+    }
+  </style>
+<div class="ptc-container ptc-section-half background-plm-grey">
+    <ptc-hero hero-type="simple" class="ptc-jumbotron" content-alignment="center">
+      <max-width-container max-width="786" breakpoint="768">
+        <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+        <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+        <ptc-spacer breakpoint="small" size="x-small"></ptc-spacer>
+        <ptc-spacer breakpoint="small" size="xx-large"></ptc-spacer>
+        <div class="is-grid has-col-12">
+          <div class="is-col-12 is-grid has-no-row-gap">
+            <ptc-breadcrumb class="is-col-12">
+              <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us">eros metus mollis</list-item>
+            </ptc-breadcrumb>
+            <ptc-para font-size="small" font-weight="w-5" para-margin="margin-flush" para-color="white"
+              para-line-h="line-height-19" class="is-col-12" enable-tooltip="true" max-lines="2"
+              hide-tooltip-on-mobile="true" seo-compatibility-mode>
+              <p>PTC On Demand is a window into the latest trends and technologies that are shaping our modern world.
+                Start streaming today to access best practices and first-hand insights into how digital transformation
+                is advancing the future of technology. </p>
+            </ptc-para>
+            <div class="is-col-12">
+              <ptc-spacer breakpoint="small" size="medium"></ptc-spacer>
+              <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+            </div>
+            <ptc-title type="h1" upperline="no-upperline" is-plm-hub title-size="xxxx-large-allbp"
+              title-height="densest" title-weight="w-8" class="is-col-12">
+              <ptc-tooltip max-length="70"
+                description="In tempus ante at eros elementum volutpat. In tempus ante at eros elementum volutpat. Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus libero ut pharetra. Aliquam convallis vulputate dignissim."
+                position="bottom"></ptc-tooltip>
+            </ptc-title>
+            <div class="is-col-12">
+              <ptc-spacer breakpoint="small" size="x-small"></ptc-spacer>
+              <ptc-spacer breakpoint="x-small" size="small"></ptc-spacer>
+            </div>
+            <ptc-para font-size="small" font-weight="w-5" para-margin="margin-flush" para-color="white"
+              para-line-h="line-height-19" class="is-col-12" enable-tooltip="true" max-lines="2"
+              hide-tooltip-on-mobile="true" seo-compatibility-mode>
+              <p>Donec eu posuere nisl, eget scelerisque lectus Donec eu posuere nisl, eget scelerisque lectus.Donec eu
+                posuere nisl, eget scelerisque lectus Donec eu posuere nisl, eget scelerisque lectus. Donec eu posuere
+                nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus
+                libero ut pharetra. Ut vulputate cursus libero ut pharetra. Aliquam convallis vulputate dignissim.</p>
+            </ptc-para>
+            <div class="is-col-12">
+              <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+              <ptc-spacer breakpoint="small" size="small"></ptc-spacer>
+              <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+              <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+            </div>
+            <ptc-button class="is-col-12" type="link" color="ptc-primary" link-href="https://www.ptc.com"
+              target="_blank">
+              Lorem Ipsum Dolor
+            </ptc-button>
+          </div>
+        </div>
+        <ptc-spacer breakpoint="small" size="medium"></ptc-spacer>
+      </max-width-container>
+    </ptc-hero>
+  </div>
+  <div class="ptc-container ptc-section-standard">
+    <div class="is-grid has-row-gap-md has-col-gap-md">
+      <div class="is-col-12 is-col-6-md is-col-4-xl">
+        <ptc-card-wrapper card-type="extra-tall" card-link="https://www.ptc.com" link-title="ptc" link-target="_blank" tracker-id="test">
+          <ptc-card-content card-type="extra-tall">
+            <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-width
+              is-full-height src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+              size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+              <ptc-overlay filter-color="bright-green" border-radius="radius-large"></ptc-overlay>
+            </ptc-picture>
+          </ptc-card-content>
+          <ptc-card-bottom card-type="extra-tall">
+            <ptc-span span-style="plm-hub-style-smaller" class="u-marginBottom-md">PLM</ptc-span>
+            <ptc-title class="u-marginBottom-md" type="h3" upperline="no-upperline" title-shadow="green"
+              text-align="center" is-plm-hub title-size="xx-large-allbp" title-weight="w-8" title-l-height="lh-23">
+              <ptc-tooltip text-display="inline" text-lines="4" z-index="z-2"
+                description="Nulla ut nunc id nulla aliquam feugiat. ulla ut nunc id nulla aliquam feugiat. ulla ut nunc id nulla aliquam feugiat."
+                position="bottom"></ptc-tooltip>
+            </ptc-title>
+            <ptc-para class="u-marginBottom-xxl" font-size="small" para-line-h="line-height-p" font-weight="w-5"
+              para-margin="margin-flush" para-style="default" para-color="white" para-align="center">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore
+              magna aliqua.
+            </ptc-para>
+            <ptc-link font-size="medium-large" theme="d-white-underline" tab-nav="-1">
+              <ptc-tooltip text-display="inline" max-length="24" z-index="z-2"
+                description="Nulla ut nunc id nulla aliqu  ut nunc id nulla aliqu ut nunc id nulla aliqu sam feugiat. Maecenas quis"
+                position="bottom"></ptc-tooltip>
+            </ptc-link>
+          </ptc-card-bottom>
+        </ptc-card-wrapper>
+      </div>
+      <div class="is-col-12 is-col-6-md is-col-4-xl">
+        <ptc-card-wrapper card-type="extra-tall" card-link="https://www.ptc.com" link-title="ptc" link-target="_blank">
+          <ptc-card-content card-type="extra-tall">
+            <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+              is-full-width src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+              size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+              <ptc-overlay filter-color="bright-blue" border-radius="radius-large"></ptc-overlay>
+            </ptc-picture>
+          </ptc-card-content>
+          <ptc-card-bottom card-type="extra-tall">
+            <ptc-span class="u-marginBottom-md" span-style="plm-hub-style-smaller">PLM</ptc-span>
+            <ptc-title class="u-marginBottom-md" type="h3" upperline="no-upperline" title-shadow="blue"
+              text-align="center" is-plm-hub title-size="xx-large-allbp" title-weight="w-8" title-l-height="lh-23">
+              Etiam Vulputate Nisi in Luctus Laoreet est Lacus Lobortis Ante
+            </ptc-title>
+            <ptc-para class="u-marginBottom-xxl" font-size="small" para-line-h="line-height-p" font-weight="w-5"
+              para-margin="margin-flush" para-style="default" para-color="white" para-align="center" enable-tooltip="true"
+              max-lines="5" hide-tooltip-on-mobile="true" seo-compatibility-mode>
+              <p>Get first-hand insights from our customers and partners. Learn how PTC’s best-in-class technology solutions are innovating and transforming the workplace. ts from our customers and partners. Learn how PTC’s best-in-class technology solutions are innovating and transforming the workplace</p>
+            </ptc-para>
+            <ptc-link font-size="medium-large" theme="d-white-underline">link test</ptc-link>
+          </ptc-card-bottom>
+        </ptc-card-wrapper>
+      </div>
+      <div class="is-col-12 is-col-6-md is-col-4-xl">
+        <ptc-card-wrapper card-type="extra-tall" card-link="https://www.ptc.com" link-title="ptc" link-target="_blank">
+          <ptc-card-content card-type="extra-tall">
+            <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+              is-full-width src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+              size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+              <ptc-overlay filter-color="bright-orange" border-radius="radius-large"></ptc-overlay>
+            </ptc-picture>
+          </ptc-card-content>
+          <ptc-card-bottom card-type="extra-tall">
+            <ptc-span class="u-marginBottom-md" span-style="plm-hub-style-smaller">PLM</ptc-span>
+            <ptc-title class="u-marginBottom-md" type="h3" upperline="no-upperline" title-shadow="orange"
+              text-align="center" is-plm-hub title-size="xx-large-allbp" title-weight="w-8" title-l-height="lh-23">
+              Etiam Vulputate Nisi in Luctus Laoreet est Lacus Lobortis Ante
+            </ptc-title>
+            <ptc-para class="u-marginBottom-xxl" font-size="small" para-line-h="line-height-p" font-weight="w-5"
+              para-margin="margin-flush" para-style="default" para-color="white" para-align="center">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore
+              magna aliqua.
+            </ptc-para>
+            <ptc-link font-size="medium-large" theme="d-white-underline">link test</ptc-link>
+          </ptc-card-bottom>
+        </ptc-card-wrapper>
+      </div>
+      <div class="is-col-12 is-col-6-md is-col-4-xl">
+        <ptc-card-wrapper card-type="extra-tall" card-link="https://www.ptc.com" link-title="ptc" link-target="_blank">
+          <ptc-card-content card-type="extra-tall">
+            <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+              is-full-width src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+              size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+              <ptc-overlay filter-color="bright-slate-grey" border-radius="radius-large"></ptc-overlay>
+            </ptc-picture>
+          </ptc-card-content>
+          <ptc-card-bottom card-type="extra-tall">
+            <ptc-span class="u-marginBottom-md" span-style="plm-hub-style-smaller">PLM</ptc-span>
+            <ptc-title class="u-marginBottom-md" type="h3" upperline="no-upperline" title-shadow="slate-grey"
+              text-align="center" is-plm-hub title-size="xx-large-allbp" title-weight="w-8" title-l-height="lh-23">
+              "Etiam Vulputate Nisi in Luctus Laoreet est Lacus Lobortis Ante.
+            </ptc-title>
+            <ptc-para class="u-marginBottom-xxl" font-size="small" para-line-h="line-height-p" font-weight="w-5"
+              para-margin="margin-flush" para-style="default" para-color="white" para-align="center">
+              <ptc-tooltip text-display="inline" text-lines="5"
+                description="Nulla ut nunc id nulla aliquam feugiat. Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus libero ut pharetra. Aliquam convallis vulputate dignissim. Mauris vel elit sit amet nibh porta cursus eu id urna. In tempus ante at eros elementum volutpat. Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh qui."
+                position="bottom"></ptc-tooltip>
+            </ptc-para>
+            <ptc-link font-size="medium-large" theme="d-white-underline">link test</ptc-link>
+          </ptc-card-bottom>
+        </ptc-card-wrapper>
+      </div>
+      <div class="is-col-12 is-col-6-md is-col-4-xl">
+        <ptc-card-wrapper card-type="extra-tall" card-link="https://www.ptc.com" link-title="ptc" link-target="_blank">
+          <ptc-card-content card-type="extra-tall">
+            <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+              is-full-width src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+              size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+              <ptc-overlay filter-color="bright-red" border-radius="radius-large"></ptc-overlay>
+            </ptc-picture>
+          </ptc-card-content>
+          <ptc-card-bottom card-type="extra-tall">
+            <ptc-span class="u-marginBottom-md" span-style="plm-hub-style-smaller">PLM</ptc-span>
+            <ptc-title class="u-marginBottom-md" type="h3" upperline="no-upperline" title-shadow="red"
+              text-align="center" is-plm-hub title-size="xx-large-allbp" title-weight="w-8" title-l-height="lh-23">
+              Etiam Vulputate Nisi in Luctus Laoreet est Lacus Lobortis Ante
+            </ptc-title>
+            <ptc-para class="u-marginBottom-xxl" font-size="small" para-line-h="line-height-p" font-weight="w-5"
+              para-margin="margin-flush" para-style="default" para-color="white" para-align="center">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore
+              magna aliqua.
+            </ptc-para>
+            <ptc-link font-size="medium-large" theme="d-white-underline">link test</ptc-link>
+          </ptc-card-bottom>
+        </ptc-card-wrapper>
+      </div>
+      <div class="is-col-12 is-col-6-md is-col-4-xl">
+        <ptc-card-wrapper card-type="extra-tall" card-link="https://www.ptc.com" link-title="ptc" link-target="_blank">
+          <ptc-card-content card-type="extra-tall">
+            <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+              is-full-width src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+              size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+              <ptc-overlay filter-color="bright-blue" border-radius="radius-large"></ptc-overlay>
+            </ptc-picture>
+          </ptc-card-content>
+          <ptc-card-bottom card-type="extra-tall">
+            <ptc-span class="u-marginBottom-md" span-style="plm-hub-style-smaller">PLM</ptc-span>
+            <ptc-title class="u-marginBottom-md" type="h3" upperline="no-upperline" title-shadow="blue"
+              text-align="center" is-plm-hub title-size="xx-large-allbp" title-weight="w-8" title-l-height="lh-23">
+              Etiam Vulputate Nisi in Luctus Laoreet est Lacus Lobortis Ante
+            </ptc-title>
+            <ptc-para class="u-marginBottom-xxl" font-size="small" para-line-h="line-height-p" font-weight="w-5"
+              para-margin="margin-flush" para-style="default" para-color="white" para-align="center">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore
+              magna aliqua.
+            </ptc-para>
+            <ptc-link font-size="medium-large" theme="d-white-underline">link test</ptc-link>
+          </ptc-card-bottom>
+        </ptc-card-wrapper>
+      </div>
+    </div>
+  </div>
+  <div class="ptc-container ptc-section-standard">
+    <div class="is-grid has-no-row-gap has-col-gap-md">
+      <max-width-container max-width="786" breakpoint="768" class="is-col-12 is-grid has-no-row-gap">
+        <ptc-title class="is-col-12" type="h2" upperline="no-upperline" is-plm-hub title-size="xx-large"
+          title-weight="w-8" text-align="center">
+          Making Industrial Innovation a Reality
+          <ptc-tooltip text-display="inline" max-length="70" z-index="z-2"
+            description="Making Industrial Innovation a Reality Nulla ut nunc id nulla aliqu  ut nunc id nulla aliqu ut nunc id nulla aliqu sam feugiat. Maecenas quis"
+            position="bottom"></ptc-tooltip>
+        </ptc-title>
+        <div class="is-col-12">
+          <ptc-spacer breakpoint="x-small" size="small"></ptc-spacer>
+          <ptc-spacer breakpoint="small" size="x-small"></ptc-spacer>
+        </div>
+        <ptc-para font-size="small" font-weight="w-5" para-margin="margin-flush" para-color="white" class="is-col-12"
+          para-align="center" para-line-h="line-height-p">
+          <ptc-tooltip text-display="inline" max-length="250" z-index="z-2"
+            description="Praesent eget justo sed purus congue sagittis eu eget nibh fusce Nulla ut nunc id nulla aliqu  ut nunc id nulla aliqu ut nunc id nulla aliqu sam feugiat. Maecenas quis"
+            position="bottom"></ptc-tooltip>
+        </ptc-para>
+        <div class="is-col-12">
+          <ptc-spacer breakpoint="x-small" size="xxx-large"></ptc-spacer>
+          <ptc-spacer breakpoint="x-small" size="xx-small"></ptc-spacer>
+          <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+          <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+        </div>
+      </max-width-container>
+      <div class="is-grid has-row-gap-md has-col-gap-md is-col-12">
+        <div class="is-col-12 is-col-6-md is-col-4-xl">
+          <ptc-card-wrapper card-type="color-outlined" card-link="https://www.ptc.com" link-title="ptc" tracker-id="color-outlined-test"
+            link-target="_blank">
+            <ptc-card-content card-type="color-outlined" outline-color="o-green">
+              <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+                is-full-width src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+                size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+                <ptc-overlay filter-color="black-4" border-radius="radius-large"></ptc-overlay>
+              </ptc-picture>
+            </ptc-card-content>
+            <ptc-card-bottom card-type="color-outlined">
+              <ptc-para seo-compatibility-mode class="u-marginBottom-lg" font-size="large" font-weight="w-8" para-margin="margin-flush"
+                para-color="white" para-align="center" para-line-h="line-height-densest" para-z-index="z-3" enable-tooltip="true" max-lines="3" para-z-index="z-3" >
+                z-3zzzzzz  tempus ante at eros elementum volutpat. Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus libero ut pharetra. Aliquam convallis vulputate dignissim.
+              </ptc-para>
+              <ptc-link font-size="x-small" theme="d-green-underline" tab-nav="-1">
+                <ptc-tooltip text-display="inline" max-length="24" z-index="z-2"
+                  description="Nulla ut nunc id nulla aliqu  ut nunc id nulla aliqu ut nunc id nulla aliqu sam feugiat. Maecenas quis"
+                  position="bottom"></ptc-tooltip>
+              </ptc-link>
+            </ptc-card-bottom>
+          </ptc-card-wrapper>
+        </div>
+        <div class="is-col-12 is-col-6-md is-col-4-xl">
+          <ptc-card-wrapper card-type="color-outlined" card-link="https://www.ptc.com" link-title="ptc"
+            link-target="_blank">
+            <ptc-card-content card-type="color-outlined" outline-color="o-blue">
+              <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+                is-full-width src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+                size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+                <ptc-overlay filter-color="black-4" border-radius="radius-large"></ptc-overlay>
+              </ptc-picture>
+            </ptc-card-content>
+            <ptc-card-bottom card-type="color-outlined">
+              <ptc-para class="u-marginBottom-lg" font-size="large" font-weight="w-8" para-margin="margin-flush"
+                para-color="white" para-align="center" para-line-h="line-height-densest">
+                Semper Eros Metus Mollis Lorem
+              </ptc-para>
+              <ptc-link font-size="x-small" theme="d-green-underline">link test</ptc-link>
+            </ptc-card-bottom>
+          </ptc-card-wrapper>
+        </div>
+        <div class="is-col-12 is-col-6-md is-col-4-xl">
+          <ptc-card-wrapper card-type="color-outlined" card-link="https://www.ptc.com" link-title="ptc"
+            link-target="_blank">
+            <ptc-card-content card-type="color-outlined" outline-color="o-orange">
+              <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+                is-full-width src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+                size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+                <ptc-overlay filter-color="black-4" border-radius="radius-large"></ptc-overlay>
+              </ptc-picture>
+            </ptc-card-content>
+            <ptc-card-bottom card-type="color-outlined">
+              <ptc-para class="u-marginBottom-lg" font-size="large" font-weight="w-8" para-margin="margin-flush"
+                para-color="white" para-align="center" para-line-h="line-height-densest">
+                Semper Eros Metus Mollis Lorem
+              </ptc-para>
+              <ptc-link font-size="x-small" theme="d-green-underline">link test</ptc-link>
+            </ptc-card-bottom>
+          </ptc-card-wrapper>
+        </div>
+        <div class="is-col-12 is-col-6-md is-col-4-xl">
+          <ptc-card-wrapper card-type="color-outlined" card-link="https://www.ptc.com" link-title="ptc"
+            link-target="_blank">
+            <ptc-card-content outline-color="o-slate-grey" card-type="color-outlined">
+              <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+                is-full-width src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+                size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+                <ptc-overlay filter-color="black-4" border-radius="radius-large"></ptc-overlay>
+              </ptc-picture>
+            </ptc-card-content>
+            <ptc-card-bottom card-type="color-outlined">
+              <ptc-para class="u-marginBottom-md" font-size="large" font-weight="w-8" para-margin="margin-flush"
+                para-color="white" para-align="center" para-line-h="line-height-densest">
+                Semper Eros Metus Mollis Lorem
+              </ptc-para>
+              <ptc-link font-size="x-small" theme="d-green-underline">link test</ptc-link>
+            </ptc-card-bottom>
+          </ptc-card-wrapper>
+        </div>
+        <div class="is-col-12 is-col-6-md is-col-4-xl">
+          <ptc-card-wrapper card-type="color-outlined" card-link="https://www.ptc.com" link-title="ptc"
+            link-target="_blank">
+            <ptc-card-content outline-color="o-red" card-type="color-outlined">
+              <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+                is-full-width src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+                size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+                <ptc-overlay filter-color="black-4" border-radius="radius-large"></ptc-overlay>
+              </ptc-picture>
+            </ptc-card-content>
+            <ptc-card-bottom card-type="color-outlined">
+              <ptc-para class="u-marginBottom-md" font-size="large" font-weight="w-8" para-margin="margin-flush"
+                para-color="white" para-align="center" para-line-h="line-height-densest">
+                Semper Eros Metus Mollis Lorem
+              </ptc-para>
+              <ptc-link font-size="x-small" theme="d-green-underline">link test</ptc-link>
+            </ptc-card-bottom>
+          </ptc-card-wrapper>
+        </div>
+        <div class="is-col-12 is-col-6-md is-col-4-xl">
+          <ptc-card-wrapper card-type="color-outlined" card-link="https://www.ptc.com" link-title="ptc"
+            link-target="_blank">
+            <ptc-card-content outline-color="o-blue" card-type="color-outlined">
+              <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+                is-full-width src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data"
+                size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+                <ptc-overlay filter-color="black-4" border-radius="radius-large"></ptc-overlay>
+              </ptc-picture>
+            </ptc-card-content>
+            <ptc-card-bottom card-type="color-outlined">
+              <ptc-para class="u-marginBottom-md" font-size="large" font-weight="w-8" para-margin="margin-flush"
+                para-color="white" para-align="center" para-line-h="line-height-densest">
+                Semper Eros Metus Mollis Lorem
+              </ptc-para>
+              <ptc-link font-size="x-small" theme="d-green-underline">link test</ptc-link>
+            </ptc-card-bottom>
+          </ptc-card-wrapper>
+        </div>
+      </div>
+    </div>
+  </div>
+  `;
+};
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Intro/preview.stories.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { html } from 'lit';
+export default {
+  title: 'Organisms/ptc/Intro'
+};
+const AlertsPage = args => {
+  return html`
+<section class="ptc-section-standard">
+        <div class="ptc-container">
+            <max-width-container max-width="746px">
+              <ptc-title type='h2' text-align='left' upperline="no-upperline" title-margin="margin-flush" title-height="xx-large">
+                Continue new you declared differed learning bringing honoured decisively estimating affronting assistance no Three Column Text Supports up to 3 rows Incomprehensibilities Un&shy;characteristically
+              </ptc-title>
+              <hr style="background-color: #9AA6AD; margin: 12px 0;">
+              <ptc-para font-size="small" font-weight="w-4" para-margin="margin-top-1" para-line-h="line-height-p" para-align="left">
+                <ptc-readmore visible-lines-custom="7" more-text="Read More" less-text="Read Less" read-more-position="left" display="inline" size="medium">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                  orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                  orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </ptc-readmore>
+              </ptc-para>
+            </max-width-container>
+        </div>
+    </section>
+  `;
+};
+export const Preview = AlertsPage.bind();