@ptcwebops/ptcw-design 6.4.28-beta → 6.4.30-beta

package/dist/collection/stories/organisms/ptc/E Store Creo Extension/preview.stories.js

@@ -0,0 +1,798 @@
+import { html } from "lit-html";
+
+export default {
+	title: "Organisms/ptc/E Store Creo Extension",
+};
+
+const Template = () => html`
+	<section class="ptc-section-standard">
+		<div class="ptc-container">
+			<max-width-container
+				max-width="768"
+				breakpoint="768"
+				align="center"
+			>
+				<ptc-title
+					seo-compatibility-mode
+					text-align="center"
+					upperline="no-upperline"
+					title-margin="margin-flush margin-bottom-3"
+				>
+					<h2>Benefits of Windchill</h2>
+				</ptc-title>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+					Sed nibh dolor, pretium tristique eros nec, ornare rhoncus
+					arcu. Etiam metus mauris, congue ut pellentesque nec,
+					volutpat nec eros. Nullam ut bibendum mi.
+				</p>
+			</max-width-container>
+			<ptc-blue-pill-announcement-bar class="white-links">
+				<p>
+					This extension can only be purchased as an add-on to
+					<a href="#">Creo Design Essentials </a>at checkout.
+				</p>
+			</ptc-blue-pill-announcement-bar>
+
+			<!-- 56px spacing -->
+			<ptc-spacer size="xxx-large"></ptc-spacer>
+			<ptc-spacer size="x-small"></ptc-spacer>
+			<ptc-spacer size="large" breakpoint="x-small"></ptc-spacer>
+
+			<ptc-title
+				seo-compatibility-mode
+				text-align="left"
+				upperline="no-upperline"
+				title-margin="margin-flush margin-bottom-6"
+			>
+				<h3>CAM / Manufacturing</h3>
+			</ptc-title>
+
+			<ptc-store-card-list>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="javascript:void(0);"
+							data-modal-target="modal-tool-design"
+							title="Tool Design"
+							class="store-card-title"
+							>Tool Design
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a
+							href="javascript:void(0);"
+							data-modal-target="modal-tool-design"
+							title="Tool Design"
+						>
+							See Details</a
+						>
+					</div>
+				</ptc-store-card>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="javascript:void(0);"
+							data-modal-target="modal-mold-analysis"
+							title="Mold Analysis"
+							class="store-card-title"
+							>Mold Analysis
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a
+							href="javascript:void(0);"
+							data-modal-target="modal-mold-analysis"
+							title="Mold Analysis"
+						>
+							See Details</a
+						>
+					</div>
+				</ptc-store-card>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="#"
+							title="Tool Design"
+							class="store-card-title"
+							>Tool Design
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a href="#" title="Tool Design"> See Details</a>
+					</div>
+				</ptc-store-card>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="#"
+							title="Tool Design"
+							class="store-card-title"
+							>Tool Design
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a href="#" title="Tool Design"> See Details</a>
+					</div>
+				</ptc-store-card>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="#"
+							title="Tool Design"
+							class="store-card-title"
+							>Tool Design
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a href="#" title="Tool Design"> See Details</a>
+					</div>
+				</ptc-store-card>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="#"
+							title="Tool Design"
+							class="store-card-title"
+							>Tool Design
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a href="#" title="Tool Design"> See Details</a>
+					</div>
+				</ptc-store-card>
+			</ptc-store-card-list>
+
+			<!-- section two started -->
+
+			<!-- 56px spacing -->
+			<ptc-spacer size="xxx-large"></ptc-spacer>
+			<ptc-spacer size="x-small"></ptc-spacer>
+			<ptc-spacer size="large" breakpoint="x-small"></ptc-spacer>
+
+			<ptc-title
+				seo-compatibility-mode
+				text-align="left"
+				upperline="no-upperline"
+				title-margin="margin-flush margin-bottom-6"
+			>
+				<h3>Model Based Definition</h3>
+			</ptc-title>
+
+			<ptc-store-card-list>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="javascript:void(0);"
+							data-modal-target="modal-tool-design2"
+							title="Tool Design"
+							class="store-card-title"
+							>Tool Design
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a
+							href="javascript:void(0);"
+							data-modal-target="modal-tool-design2"
+							title="Tool Design"
+						>
+							See Details</a
+						>
+					</div>
+				</ptc-store-card>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="javascript:void(0);"
+							data-modal-target="modal-mold-analysis2"
+							title="Mold Analysis"
+							class="store-card-title"
+							>Mold Analysis
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a
+							href="javascript:void(0);"
+							data-modal-target="modal-mold-analysis2"
+							title="Mold Analysis"
+						>
+							See Details</a
+						>
+					</div>
+				</ptc-store-card>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="#"
+							title="Tool Design"
+							class="store-card-title"
+							>Tool Design
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a href="#" title="Tool Design"> See Details</a>
+					</div>
+				</ptc-store-card>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="#"
+							title="Tool Design"
+							class="store-card-title"
+							>Tool Design
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a href="#" title="Tool Design"> See Details</a>
+					</div>
+				</ptc-store-card>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="#"
+							title="Tool Design"
+							class="store-card-title"
+							>Tool Design
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a href="#" title="Tool Design"> See Details</a>
+					</div>
+				</ptc-store-card>
+				<ptc-store-card class="swiper-slide">
+					<ptc-img
+						slot="top-image"
+						img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+						image-type="smart-img"
+						load-mode="lazy-bg"
+						border-radius="radius-standard-top"
+					>
+						<ptc-overlay
+							border-radius="radius-standard"
+							filter-color="white-bottom"
+							overlay-z-index="z-index-p-1"
+							styles=""
+						></ptc-overlay
+					></ptc-img>
+					<div class="store-card-logo">
+						<img
+							src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/157e020f49064cc5baded54e27696806?v=5066c912"
+							alt="Creo Logo"
+						/>
+					</div>
+					<h4>
+						<a
+							href="#"
+							title="Tool Design"
+							class="store-card-title"
+							>Tool Design
+						</a>
+					</h4>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing
+						elit. Sed nibh dolor, pretium tristique eros nec.
+					</p>
+					<div class="cta-link">
+						<a href="#" title="Tool Design"> See Details</a>
+					</div>
+				</ptc-store-card>
+			</ptc-store-card-list>
+		</div>
+	</section>
+
+	<!-- Modal list started  -->
+	<ptc-modal
+		id="modal-tool-design"
+		size="lg"
+		fixed
+		close-on-blur="true"
+		show-header-footer="true"
+		hide-header="true"
+		border-radius="standard"
+		keep-in-viewport="true"
+		styles=".wrapper .modal-popup .close{ position: absolute;top: 8px;right: 8px;  margin: 0; z-index: 10} .wrapper .modal-popup.shadow-scroller .modal-footer{ min-height:auto !important;} :host(.enclose-modal) .modal-popup{ max-height: calc(100vh - 48px) !important; margin: 30px auto;  max-width: 768px !important; width: 95%} .modal-body.modern-scrollbar{ border-radius: 4px}"
+		class="store-modal-card"
+		modern-scrollbar="true"
+	>
+		<div slot="body" class="store-modal-body">
+			<div class="modal-image-wrapper">
+				<ptc-img
+					img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+					image-type="smart-img"
+					load-mode="lazy-bg"
+					border-radius="radius-standard-top"
+				>
+					<ptc-overlay
+						filter-color="white-bottom"
+						overlay-z-index="z-index-p-1"
+						styles=""
+					></ptc-overlay
+				></ptc-img>
+			</div>
+			<div class="store-modal-content">
+				<max-width-container
+					max-width="768"
+					breakpoint="768"
+					align="center"
+				>
+					<ptc-title
+						seo-compatibility-mode
+						text-align="center"
+						upperline="no-upperline"
+						title-margin="margin-flush margin-bottom-2"
+					>
+						<h2>Creo Tool Design Extension</h2>
+					</ptc-title>
+					<div class="store-modal-description">
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing
+							elit. Sed nibh dolor, pretium tristique eros nec,
+							ornare rhoncus arcu. Etiam metus mauris, congue ut
+							pellentesque nec, volutpat nec eros. Nullam ut
+							bibendum mi.
+						</p>
+					</div>
+				</max-width-container>
+				<ptc-blue-pill-announcement-bar class="white-links">
+					<p>
+						This extension can only be purchased as an add-on to
+						<a href="#">Creo Design Essentials </a>at checkout.
+					</p>
+				</ptc-blue-pill-announcement-bar>
+
+				<!-- 56px spacing -->
+				<ptc-spacer size="large"></ptc-spacer>
+				<ptc-spacer size="large" breakpoint="x-small"></ptc-spacer>
+
+				<!-- Rick Text editor -->
+				<h3>Lorem ipsum dolor</h3>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+					Sed nibh dolor, pretium tristique eros nec, ornare rhoncus
+					arcu. Etiam metus mauris, congue ut pellentesque nec,
+					volutpat nec eros. Nullam ut bibendum mi. Etiam sem diam,
+					semper in purus a, auctor vehicula nibh. Duis
+					pellentesque, nisi ut finibus consectetur, tellus augue
+					ultrices mauris in.
+				</p>
+				<p>
+					Dictum quam augue sit amet nisi. Proin quis lorem sit amet
+					nunc dignissim bibendum eget volutpat nunc. Nam luctus,
+					libero ut tincidunt porttitor.
+				</p>
+
+				<h3>Morbi Eget Cursus Massa</h3>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+					Sed nibh dolor, pretium tristique eros nec, ornare rhoncus
+					arcu. Etiam metus mauris, congue ut pellentesque nec,
+					volutpat nec eros. Nullam ut bibendum mi. Etiam sem diam,
+					semper in purus a, auctor vehicula nibh. Duis
+					pellentesque, nisi ut finibus consectetur, tellus augue
+					ultrices mauris in.
+				</p>
+				<ul>
+						<li><strong>Lorem ipsum dolor sit a </strong></li>
+						<li><strong>Consectetur adipiscing elit</strong></li>
+						<li><strong>Sed do eiusmod tempor</strong></li>
+						<li><strong>Incididunt ut labore</strong></li>
+						<li><strong>Et dolore magna aliqua</strong></li>
+						<li><strong>Duis aute irure dolor</strong></li>
+						<li><strong>In reprehenderit in voluptate</strong></li>
+					</ul>
+				<p>
+					Dictum quam augue sit amet nisi. Proin quis lorem sit amet
+					nunc dignissim bibendum eget volutpat nunc. Nam luctus,
+					libero ut tincidunt porttitor.
+				</p>
+			</div>
+		</div>
+		<div slot="footer" class="store-modal-footer">
+			<div class="u-flex store-modal-footer-buttons">
+				<ptc-button
+					type="link"
+					color="ptc-tertiary"
+					seo-compatibility-mode
+					>See Full Details</ptc-button
+				>
+				<ptc-button
+					type="link"
+					color="ptc-quaternary"
+					seo-compatibility-mode
+					>Buy Creo Design Essentials</ptc-button
+				>
+			</div>
+		</div>
+	</ptc-modal>
+
+	<ptc-modal
+		id="modal-mold-analysis"
+		size="lg"
+		fixed
+		close-on-blur="true"
+		show-header-footer="true"
+		hide-header="true"
+		border-radius="standard"
+		keep-in-viewport="true"
+		styles=".wrapper .modal-popup .close{ position: absolute;top: 8px;right: 8px;  margin: 0; z-index: 10} .wrapper .modal-popup.shadow-scroller .modal-footer{ min-height:auto !important;} :host(.enclose-modal) .modal-popup{ max-height: calc(100vh - 48px) !important; margin: 30px auto;  max-width: 768px !important; width: 95%} .modal-body.modern-scrollbar{ border-radius: 4px}"
+		class="store-modal-card"
+		modern-scrollbar="true"
+	>
+		<div slot="body" class="store-modal-body">
+			<div class="modal-image-wrapper">
+				<ptc-img
+					img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/c7ab0a494d334fb8a51c30fbeb1518c9?v=d99bc902"
+					image-type="smart-img"
+					load-mode="lazy-bg"
+					border-radius="radius-standard-top"
+				>
+					<ptc-overlay
+						filter-color="white-bottom"
+						overlay-z-index="z-index-p-1"
+						styles=""
+					></ptc-overlay
+				></ptc-img>
+			</div>
+			<div class="store-modal-content">
+				<max-width-container
+					max-width="768"
+					breakpoint="768"
+					align="center"
+				>
+					<ptc-title
+						seo-compatibility-mode
+						text-align="center"
+						upperline="no-upperline"
+						title-margin="margin-flush margin-bottom-2"
+					>
+						<h2>modal-mold-analysis</h2>
+					</ptc-title>
+					<div class="store-modal-description">
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing
+							elit. Sed nibh dolor, pretium tristique eros nec,
+							ornare rhoncus arcu. Etiam metus mauris, congue ut
+							pellentesque nec, volutpat nec eros. Nullam ut
+							bibendum mi.
+						</p>
+					</div>
+				</max-width-container>
+				<ptc-blue-pill-announcement-bar class="white-links">
+					<p>
+						This extension can only be purchased as an add-on to
+						<a href="#">Creo Design Essentials </a>at checkout.
+					</p>
+				</ptc-blue-pill-announcement-bar>
+
+				<!-- 56px spacing -->
+				<ptc-spacer size="large"></ptc-spacer>
+				<ptc-spacer size="large" breakpoint="x-small"></ptc-spacer>
+
+				<!-- Rick Text editor -->
+				<h3>Lorem ipsum dolor</h3>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+					Sed nibh dolor, pretium tristique eros nec, ornare rhoncus
+					arcu. Etiam metus mauris, congue ut pellentesque nec,
+					volutpat nec eros. Nullam ut bibendum mi. Etiam sem diam,
+					semper in purus a, auctor vehicula nibh. Duis
+					pellentesque, nisi ut finibus consectetur, tellus augue
+					ultrices mauris in.
+				</p>
+				<p>
+					Dictum quam augue sit amet nisi. Proin quis lorem sit amet
+					nunc dignissim bibendum eget volutpat nunc. Nam luctus,
+					libero ut tincidunt porttitor.
+				</p>
+
+				<h3>Morbi Eget Cursus Massa</h3>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+					Sed nibh dolor, pretium tristique eros nec, ornare rhoncus
+					arcu. Etiam metus mauris, congue ut pellentesque nec,
+					volutpat nec eros. Nullam ut bibendum mi. Etiam sem diam,
+					semper in purus a, auctor vehicula nibh. Duis
+					pellentesque, nisi ut finibus consectetur, tellus augue
+					ultrices mauris in.
+				</p>
+				<ul>
+						<li><strong>Lorem ipsum dolor sit a </strong></li>
+						<li><strong>Consectetur adipiscing elit</strong></li>
+						<li><strong>Sed do eiusmod tempor</strong></li>
+						<li><strong>Incididunt ut labore</strong></li>
+						<li><strong>Et dolore magna aliqua</strong></li>
+						<li><strong>Duis aute irure dolor</strong></li>
+						<li><strong>In reprehenderit in voluptate</strong></li>
+					</ul>
+				<p>
+					Dictum quam augue sit amet nisi. Proin quis lorem sit amet
+					nunc dignissim bibendum eget volutpat nunc. Nam luctus,
+					libero ut tincidunt porttitor.
+				</p>
+			</div>
+		</div>
+		<div slot="footer" class="store-modal-footer">
+			<div class="u-flex store-modal-footer-buttons">
+				<ptc-button
+					type="link"
+					color="ptc-tertiary"
+					seo-compatibility-mode
+					>See Full Details</ptc-button
+				>
+				<ptc-button
+					type="link"
+					color="ptc-quaternary"
+					seo-compatibility-mode
+					>Buy Creo Design Essentials</ptc-button
+				>
+			</div>
+		</div>
+	</ptc-modal>
+`;
+
+export const Default = Template.bind({});
+// Default.args = {};