@ptcwebops/ptcw-design 6.3.35-beta → 6.3.35

package/dist/collection/stories/organisms/ptc/Pricing Packaging Table/preview.stories.js

@@ -0,0 +1,399 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Pricing Packaging Table'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-sticky-section>
+    <ptc-subnav>
+        <div slot="subnav-menu-left" class="menu-left" id="slider">
+            <ptc-nav-slider>
+                <ptc-nav-link title-text="" class="slide subnav-first-item" href="#test1">Life at PTC</ptc-nav-link>
+                <ptc-nav-link title-text="" class="slide" href="#test">Culture </ptc-nav-link>
+                <ptc-nav-submenu class="slide dropdown-btn" label="Locations">
+                    <div class="dropdown-content">
+                        <ptc-nav-slider>
+                            <ptc-nav-link title-text="" href="" class="subnav-first-item">China</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Germany</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">India</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Romania</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Spain</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">United States</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Other Locations</ptc-nav-link>
+                        </ptc-nav-slider>
+                    </div>
+                </ptc-nav-submenu>
+                <ptc-nav-submenu class="slide dropdown-btn" label="Teams">
+                    <div class="dropdown-content">
+                        <ptc-nav-slider>
+                            <ptc-nav-link title-text="" href="" class="subnav-first-item">Customer Success</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Finance</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Marketing</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">People Team</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">R&D and Products</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Sales</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Strategy</ptc-nav-link>
+
+                        </ptc-nav-slider>
+                    </div>
+                </ptc-nav-submenu>
+                <ptc-nav-link title-text="" class="slide" href="/en/careers/students">Students</ptc-nav-link>
+                <ptc-nav-link title-text="" class="slide"
+                    href="/en/careers/diversity-equity-and-inclusion">Diversity, Equity &amp; Inclusion</ptc-nav-link>
+                <ptc-nav-submenu class="slide dropdown-btn" label="Teams">
+                    <div class="dropdown-content">
+                        <ptc-nav-slider>
+                            <ptc-nav-link title-text="" href="">Customer Success</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Finance</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Marketing</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">People Team</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">R&D and Products</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Sales</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Strategy</ptc-nav-link>
+
+                        </ptc-nav-slider>
+                    </div>
+                </ptc-nav-submenu>
+                <ptc-nav-link title-text="" class="slide" href="/en/careers/students">Students</ptc-nav-link>
+                <ptc-nav-link title-text="" class="slide"
+                    href="/en/careers/diversity-equity-and-inclusion">Diversity, Equity &amp; Inclusion</ptc-nav-link>
+            </ptc-nav-slider>
+        </div>
+
+        <div slot="subnav-menu-right" class="menu-right u-flex-lg">
+            
+            
+            <ptc-nav-submenu label="Other links" class="short-dropdown dropdown-btn" icon-asset-name="doc">
+                <div class="dropdown-content">
+                    <ptc-subnav-card card-title="Read “What is Spatial Computing?”" card-href="https://www.ptc.com"
+                        card-image-src="https://www-dev.ptc.com/-/media/test/asset-doc.svg"
+                        card-image-alt="Doc Image" cta-text="Download Asset"
+                        cta-icon-asset-name="download-arrow"></ptc-subnav-card>
+                </div>
+            </ptc-nav-submenu>
+        </div>
+    </ptc-subnav>
+</ptc-sticky-section>
+  <div class="ptc-container">
+    
+    <section class="ptc-section">
+    <ptc-pricing-packaging-table page-with-subnav=false table-title="Creo Design Packages" table-sub-title="Starting at $2,780 (Locked License Price)" data-rows=5 data-cols=4 disclaimer-count=2>
+      <span slot="table-description">All plans are on a per-company basis, meaning you can <strong>publish</strong> as many applications as you'd like under a single plan. Here is an <a href="http://www.ptc.com" target="_self">example of a hyperlink</a> for QA testing.</span>
+      <span slot="desktop-header-first-cell">Package options</span>
+      <span slot="column-header-1">Design Essentials</span>
+      <a slot="header-link-1" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-2">Design Advanced</span>
+      <a slot="header-link-2" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-3">Design Advanced Professional</span>
+      <a slot="header-link-3" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-4">Design Premium</span>
+      <a slot="header-link-4" href="https://www.ptc.com">Select Package</a>
+
+      <div slot="row-header-1"><p class="table-row-header-p">Industry-Standard 3D CAD Capabilities**</p></div>
+      <div slot="row-header-2"><p class="table-row-header-p">Augmented Reality Design Visualization</p></div>
+      <div slot="row-header-3"><p class="table-row-header-p">Top-Down</p></div>
+      <div slot="row-header-4"><p class="table-row-header-p">Prismatic & Multi-Surface Milling</p></div>
+      <div slot="row-header-5"><p class="table-row-header-p">Advanced Surfacing & Additive Manufacturing</p></div>
+
+      <icon-asset slot="cell-r1-c1" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <icon-asset slot="cell-r2-c1" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r2-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r2-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r2-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <icon-asset slot="cell-r3-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r3-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r3-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r3-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <icon-asset slot="cell-r4-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r4-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r4-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r4-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <icon-asset slot="cell-r5-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r5-c2" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r5-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r5-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <a slot="cta-button-1" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-2" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-3" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-4" href="https://www.ptc.com">Select Package</a>
+
+      <span slot="disclaimer-1">**Contact us to purchase additional target generations.</span>
+      <span slot="disclaimer-2">***Lorem ipsum dolor sit amet, consectetur adipiscing elit donec laoreet.</span>
+    </ptc-pricing-packaging-table>
+    </section>
+
+    <section class="ptc-section">
+    <ptc-pricing-add-on-section card-count=4>
+      <span slot="card-title-1">Cloud</span>
+      <span slot="card-pricing-1">$99 per month*</span>
+      <div slot="card-body-1">
+        <list-item>Up to 100k image</list-item>
+        <list-item>Up to 10k recos per month</list-item>
+      </div>
+      <a slot="card-cta-1" href="https://www.ptc.com/">Buy</a>
+      <span slot="card-disclaimer-1">*Not available in China</span>
+
+      <span slot="card-title-2">Cloud Plus</span>
+      <span slot="card-pricing-2">Contact for pricing*</span>
+      <div slot="card-body-2">
+        <list-item>Up to 100M images</list-item>
+        <list-item>Up to 10M recos per month</list-item>
+        <list-item>Production support</list-item>
+      </div>
+      <a slot="card-cta-2" href="https://www.ptc.com/">Buy</a>
+      <span slot="card-disclaimer-2">*Not available in China</span>
+
+      <span slot="card-title-3">Cloud Plus Extra</span>
+      <span slot="card-pricing-3">$219 per month*</span>
+      <div slot="card-body-3">
+        <list-item>Up to 100B images</list-item>
+        <list-item>Up to 10B recos per month</list-item>
+      </div>
+      <a slot="card-cta-3" href="https://www.ptc.com/">Buy</a>
+      <span slot="card-disclaimer-3">*Not available in China</span>
+
+      <span slot="card-title-4">Cloud Max</span>
+      <span slot="card-pricing-4">Contact for pricing*</span>
+      <div slot="card-body-4">
+        <list-item>Up to 100B images</list-item>
+        <list-item>Up to 10B recos per month</list-item>
+        <list-item>Super Powers</list-item>
+      </div>
+      <a slot="card-cta-4" href="https://www.ptc.com/">Buy</a>
+      <span slot="card-disclaimer-4">*Not available in China</span>
+    </ptc-pricing-add-on-section>
+    </section>
+
+    
+    <section class="ptc-section">
+    <ptc-pricing-packaging-table page-with-subnav=false table-title="Table with scroll" table-sub-title="" table-description="" data-rows=5 data-cols=8 disclaimer-count=0>
+      <span slot="desktop-header-first-cell">Package options</span>
+      <span slot="column-header-1">Design Essentials</span>
+      <a slot="header-link-1" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-2">Design Advanced</span>
+      <a slot="header-link-2" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-3">Design Advanced Professional</span>
+      <a slot="header-link-3" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-4">Design Premium</span>
+      <a slot="header-link-4" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-5">Design Essentials</span>
+      <a slot="header-link-5" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-6">Design Advanced</span>
+      <a slot="header-link-6" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-7">Design Advanced Professional</span>
+      <a slot="header-link-7" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-8">Design Premium</span>
+      <a slot="header-link-8" href="https://www.ptc.com">Select Package</a>
+
+      <div slot="row-header-1"><p class="table-row-header-p">Industry-Standard 3D CAD Capabilities**</p></div>
+      <div slot="row-header-2"><p class="table-row-header-p">Augmented Reality Design Visualization</p></div>
+      <div slot="row-header-3"><p class="table-row-header-p">Top-Down</p></div>
+      <div slot="row-header-4"><p class="table-row-header-p">Prismatic & Multi-Surface Milling</p></div>
+      <div slot="row-header-5"><p class="table-row-header-p">Advanced Surfacing & Additive Manufacturing</p></div>
+
+      <icon-asset slot="cell-r1-c1" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c5" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c6" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c7" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c8" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <icon-asset slot="cell-r2-c1" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <a href="#" slot="cell-r2-c2">This is a Test</a>
+      
+      <icon-asset slot="cell-r2-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <a href="#" slot="cell-r2-c4">This is a Test</a>
+      
+      <icon-asset slot="cell-r2-c5" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r2-c6" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r2-c7" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <a href="#" slot="cell-r2-c8">This is a Test</a>
+      
+
+      <icon-asset slot="cell-r3-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r3-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r3-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r3-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r3-c5" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r3-c6" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r3-c7" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r3-c8" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <icon-asset slot="cell-r4-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r4-c2" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r4-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r4-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r4-c5" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r4-c6" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r4-c7" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r4-c8" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <icon-asset slot="cell-r5-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r5-c2" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r5-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r5-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r5-c5" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r5-c6" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r5-c7" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r5-c8" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <a slot="cta-button-1" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-2" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-3" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-4" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-5" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-6" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-7" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-8" href="https://www.ptc.com">Select Package</a>
+    </ptc-pricing-packaging-table>
+    </section>
+    <section style="height: 400px;" id="test1">
+      <div class="ptc-container">
+        <p>this is test para text   </p>
+      </div>
+    </section>
+    
+    <section class="ptc-section">
+      <ptc-pricing-packaging-table page-with-subnav=false table-title="Creo Design Packages" table-sub-title="Starting at $2,780 (Locked License Price)" data-rows=5 data-cols=4 disclaimer-count=2>
+        <span slot="table-description">All plans are on a per-company basis, meaning you can <strong>publish</strong> as many applications as you'd like under a single plan. Here is an <a href="http://www.ptc.com" target="_self">example of a hyperlink</a> for QA testing.</span>
+        <span slot="desktop-header-first-cell">Package options</span>
+        <span slot="column-header-1">Design Essentials</span>
+        <a slot="header-link-1" href="https://www.ptc.com">Select Package</a>
+        <span slot="column-header-2">Design Advanced</span>
+        <a slot="header-link-2" href="https://www.ptc.com">Select Package</a>
+        <span slot="column-header-3">Design Advanced Professional</span>
+        <a slot="header-link-3" href="https://www.ptc.com">Select Package</a>
+        <span slot="column-header-4">Design Premium</span>
+        <a slot="header-link-4" href="https://www.ptc.com">Select Package</a>
+
+        <div slot="row-header-1">
+          <p class="table-row-header-p">
+            Image Targets <br>
+            VuMarks <br>
+            Multi-Targets <br>
+            Cylinder Targets <br>
+            Ground Plane
+          </p>
+        </div>
+        <div slot="row-header-2">
+          <span>Augmented</span>
+          <p class="table-row-header-p">Reality</p>
+          <p class="table-row-header-p">Design</p>
+          <span>Visualization</span>
+        </div>
+        <div slot="row-header-3">
+          <p class="table-row-header-p">
+            Top-Down
+          </p>
+        </div>
+        
+        <div slot="row-header-4">
+          <p class="table-row-header-p">
+            Prismatic & Multi-Surface Milling
+          </p>
+          <ul style="list-style-type:square; margin: 10px 0 0 0">
+            <li>
+              1000 images per month
+            </li>
+            <li>
+              1000 recos per month<br>
+              *Not Available in China
+            </li>
+          </ul>
+        </div>
+        
+        <div slot="row-header-5">
+          <p class="table-row-header-p">
+            Advanced Surfacing & Additive Manufacturing
+          </p>
+        </div>
+
+        <icon-asset slot="cell-r1-c1" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+        <icon-asset slot="cell-r1-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+        <icon-asset slot="cell-r1-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+        <icon-asset slot="cell-r1-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+        <icon-asset slot="cell-r2-c1" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+        <icon-asset slot="cell-r2-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+        <icon-asset slot="cell-r2-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+        <icon-asset slot="cell-r2-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+        <icon-asset slot="cell-r3-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+        <icon-asset slot="cell-r3-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+        <icon-asset slot="cell-r3-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+        <icon-asset slot="cell-r3-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+        <icon-asset slot="cell-r4-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+        <icon-asset slot="cell-r4-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+        <icon-asset slot="cell-r4-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+        <icon-asset slot="cell-r4-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+        <icon-asset slot="cell-r5-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+        <icon-asset slot="cell-r5-c2" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+        <icon-asset slot="cell-r5-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+        <icon-asset slot="cell-r5-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+        <a slot="cta-button-1" href="https://www.ptc.com">Select Package</a>
+        <a slot="cta-button-2" href="https://www.ptc.com">Select Package</a>
+        <a slot="cta-button-3" href="https://www.ptc.com">Select Package</a>
+        <a slot="cta-button-4" href="https://www.ptc.com">Select Package</a>
+
+        <span slot="disclaimer-1">**Contact us to purchase additional target generations.</span>
+        <span slot="disclaimer-2">***Lorem ipsum dolor sit amet, consectetur adipiscing elit donec laoreet.</span>
+      </ptc-pricing-packaging-table>
+    </section>
+
+    
+    <section class="ptc-section">
+    <ptc-pricing-packaging-table page-with-subnav=false table-title="Table with fewer columns" table-sub-title="" table-description="" data-rows=5 data-cols=2 disclaimer-count=0>
+      <span slot="desktop-header-first-cell">Package options</span>
+      <span slot="column-header-1">Design Essentials</span>
+      <a slot="header-link-1" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-2">Design Advanced</span>
+      <a slot="header-link-2" href="https://www.ptc.com">Select Package</a>
+
+      <div slot="row-header-1"><p class="table-row-header-p">Industry-Standard 3D CAD Capabilities**</p></div>
+      <div slot="row-header-2"><p class="table-row-header-p">Augmented Reality Design Visualization</p></div>
+      <div slot="row-header-3"><p class="table-row-header-p">Top-Down</p></div>
+      <div slot="row-header-4"><p class="table-row-header-p">Prismatic & Multi-Surface Milling</p></div>
+      <div slot="row-header-5"><p class="table-row-header-p">Advanced Surfacing & Additive Manufacturing</p></div>
+
+      <icon-asset slot="cell-r1-c1" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <icon-asset slot="cell-r2-c1" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r2-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <icon-asset slot="cell-r3-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r3-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <icon-asset slot="cell-r4-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r4-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <icon-asset slot="cell-r5-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r5-c2" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+
+      <a slot="cta-button-1" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-2" href="https://www.ptc.com">Select Package</a>
+    </ptc-pricing-packaging-table>
+    </section>
+  </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Pricing Packaging Table Subnav/preview.stories.js

@@ -0,0 +1,179 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Pricing Packaging Table Subnav'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-sticky-section>
+    <ptc-subnav>
+        <div slot="subnav-menu-left" class="menu-left" id="slider">
+            <ptc-nav-slider>
+                <ptc-nav-link title-text="" class="slide" href="en/careers">Life at PTC</ptc-nav-link>
+                <ptc-nav-link title-text="" class="slide" href="/en/careers/culture">Culture </ptc-nav-link>
+                <ptc-nav-submenu class="slide dropdown-btn" label="Locations">
+                    <div class="dropdown-content">
+                        <ptc-nav-slider>
+                            <ptc-nav-link title-text="" href="">China</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Germany</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">India</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Romania</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Spain</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">United States</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Other Locations</ptc-nav-link>
+                        </ptc-nav-slider>
+                    </div>
+                </ptc-nav-submenu>
+                <ptc-nav-submenu class="slide dropdown-btn" label="Teams">
+                    <div class="dropdown-content">
+                        <ptc-nav-slider>
+                            <ptc-nav-link title-text="" href="">Customer Success</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Finance</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Marketing</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">People Team</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">R&D and Products</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Sales</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Strategy</ptc-nav-link>
+
+                        </ptc-nav-slider>
+                    </div>
+                </ptc-nav-submenu>
+                <ptc-nav-link title-text="" class="slide" href="/en/careers/students">Students</ptc-nav-link>
+                <ptc-nav-link title-text="" class="slide"
+                    href="/en/careers/diversity-equity-and-inclusion">Diversity, Equity &amp; Inclusion</ptc-nav-link>
+                <ptc-nav-submenu class="slide dropdown-btn" label="Teams">
+                    <div class="dropdown-content">
+                        <ptc-nav-slider>
+                            <ptc-nav-link title-text="" href="">Customer Success</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Finance</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Marketing</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">People Team</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">R&D and Products</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Sales</ptc-nav-link>
+                            <ptc-nav-link title-text="" href="">Strategy</ptc-nav-link>
+
+                        </ptc-nav-slider>
+                    </div>
+                </ptc-nav-submenu>
+                <ptc-nav-link title-text="" class="slide" href="/en/careers/students">Students</ptc-nav-link>
+                <ptc-nav-link title-text="" class="slide"
+                    href="/en/careers/diversity-equity-and-inclusion">Diversity, Equity &amp; Inclusion</ptc-nav-link>
+            </ptc-nav-slider>
+        </div>
+
+        <div slot="subnav-menu-right" class="menu-right u-flex-lg">
+            <ptc-nav-submenu label="Other links" class="short-dropdown dropdown-btn" icon-asset-name="doc">
+                <div class="dropdown-content">
+                    <ptc-subnav-card card-title="Read “What is Spatial Computing?”" card-href="https://www.ptc.com"
+                        card-image-src="https://www-dev.ptc.com/-/media/test/asset-doc.svg"
+                        card-image-alt="Doc Image" cta-text="Download Asset"
+                        cta-icon-asset-name="download-arrow"></ptc-subnav-card>
+                </div>
+            </ptc-nav-submenu>
+        </div>
+    </ptc-subnav>
+  </ptc-sticky-section>
+
+  <div class="ptc-container">
+    <section class="ptc-section">
+    <ptc-pricing-packaging-table page-with-subnav=true table-title="Creo Design Packages" table-sub-title="Starting at $2,780 (Locked License Price)" data-rows=5 data-cols=4 disclaimer-count=2>
+      <span slot="table-description">All plans are on a per-company basis, meaning you can <strong>publish</strong> as many applications as you'd like under a single plan. Here is an <a href="http://www.ptc.com" target="_self">example of a hyperlink</a> for QA testing.</span>
+      <span slot="desktop-header-first-cell">Package options</span>
+      <span slot="column-header-1">Design Essentials</span>
+      <a slot="header-link-1" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-2">Design Advanced</span>
+      <a slot="header-link-2" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-3">Design Advanced Professional</span>
+      <a slot="header-link-3" href="https://www.ptc.com">Select Package</a>
+      <span slot="column-header-4">Design Premium</span>
+      <a slot="header-link-4" href="https://www.ptc.com">Select Package</a>
+
+      <span slot="row-header-1">Industry-Standard 3D CAD Capabilities**</span>
+      <span slot="row-header-2">Augmented Reality Design Visualization</span>
+      <span slot="row-header-3">Top-Down</span>
+      <span slot="row-header-4">Prismatic & Multi-Surface Milling</span>
+      <span slot="row-header-5">Advanced Surfacing & Additive Manufacturing</span>
+
+      <icon-asset slot="cell-r1-c1" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r1-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r2-c1" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r2-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r2-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r2-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r3-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r3-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r3-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r3-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r4-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r4-c2" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r4-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r4-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r5-c1" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r5-c2" type="solid" size="large" name="minus" color="primary-gray"></icon-asset>
+      <icon-asset slot="cell-r5-c3" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+      <icon-asset slot="cell-r5-c4" type="ptc" size="large" name="checkmark" color="ptc-green"></icon-asset>
+
+      <a slot="cta-button-1" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-2" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-3" href="https://www.ptc.com">Select Package</a>
+      <a slot="cta-button-4" href="https://www.ptc.com">Select Package</a>
+
+      <span slot="disclaimer-1">**Contact us to purchase additional target generations.</span>
+      <span slot="disclaimer-2">***Lorem ipsum dolor sit amet, consectetur adipiscing elit donec laoreet.</span>
+    </ptc-pricing-packaging-table>
+  </section>
+
+  <section class="ptc-section">
+    <ptc-pricing-add-on-section card-count=4>
+      <span slot="card-title-1">Cloud</span>
+      <span slot="card-pricing-1">$99 per month*</span>
+      <div slot="card-body-1">
+        <list-item>Up to 100k image</list-item>
+        <list-item>Up to 10k recos per month</list-item>
+      </div>
+      <a slot="card-cta-1" href="https://www.ptc.com/">Buy</a>
+      <span slot="card-disclaimer-1">*Not available in China</span>
+
+      <span slot="card-title-2">Cloud Plus</span>
+      <span slot="card-pricing-2">Contact for pricing*</span>
+      <div slot="card-body-2">
+        <list-item>Up to 100M images</list-item>
+        <list-item>Up to 10M recos per month</list-item>
+        <list-item>Production support</list-item>
+        <list-item>Up to 10M recos <a href="">Test</a> month</list-item>
+        <list-item>Production support</list-item>
+      </div>
+      <a slot="card-cta-2" href="https://www.ptc.com/">Buy</a>
+      <span slot="card-disclaimer-2">*Not available in China</span>
+      <span slot="card-title-3">Cloud Plus Extra</span>
+      <span slot="card-pricing-3">$219 per month*</span>
+      <div slot="card-body-3">
+        <list-item>Up to 100B images</list-item>
+        <list-item>Up to 10B recos per month</list-item>
+      </div>
+      <a slot="card-cta-3" href="https://www.ptc.com/">Buy</a>
+      <span slot="card-disclaimer-3">*Not available in China</span>
+
+      <span slot="card-title-4">Cloud Max</span>
+      <span slot="card-pricing-4">Contact for pricing*</span>
+      <div slot="card-body-4">
+        <list-item>Up to 100B images</list-item>
+        <list-item>Up to 10B recos per month</list-item>
+        <list-item>Super Powers</list-item>
+      </div>
+      <a slot="card-cta-4" href="https://www.ptc.com/">Buy</a>
+      <span slot="card-disclaimer-4">*Not available in China</span>
+    </ptc-pricing-add-on-section>
+  </section>
+    <div style="height: 800px"></div>
+  </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();