diff --git a/web-components/src/global.css.js b/web-components/src/global.css.js
index b4762eaf..6e53c488 100644
--- a/web-components/src/global.css.js
+++ b/web-components/src/global.css.js
@@ -132,6 +132,15 @@ styles.innerHTML = `
 
     --ellipsis-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="2" cy="2" r="2" fill="%232c2c2c" transform="translate(6 6)"/><circle cx="2" cy="2" r="2" fill="%232c2c2c" data-name="Ellipse 71" transform="translate(12 6)"/><circle cx="2" cy="2" r="2" fill="%232c2c2c" transform="translate(0 6)"/></svg>');
 
+    /* callout */
+    --consonant-merch-card-callout-line-height: 21px;
+    --consonant-merch-card-callout-font-size: 14px;
+    --consonant-merch-card-callout-font-color: #2C2C2C;
+    --consonant-merch-card-callout-icon-size: 16px;
+    --consonant-merch-card-callout-icon-top: 6px;
+    --consonant-merch-card-callout-icon-right: 8px;
+    --consonant-merch-card-callout-letter-spacing: 0px;
+    --consonant-merch-card-callout-icon-padding: 34px;
 }
 
 merch-card-collection {
@@ -242,6 +251,43 @@ merch-card [slot='heading-xl'] {
     color: var(--merch-color-grey-80);
 }
 
+merch-card [slot='callout-text'] {
+    display: inline-block;
+    margin: var(--consonant-merch-spacing-xxxs) 0px;
+}
+
+merch-card [slot='callout-text'] > div {
+    position: relative;
+    display: inline-grid;
+    background: rgba(203 203 203 / 50%);
+    border-radius: var(--consonant-merch-spacing-xxxs);
+    padding: var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxs);
+}
+
+merch-card [slot='callout-text'] > div.callout-content-wrapper-with-icon {
+    padding-right: var(--consonant-merch-card-callout-icon-padding);
+}
+
+merch-card [slot='callout-text'] > div > div {
+    display: inline-block;
+    text-align: left;
+    font: normal normal normal var(--consonant-merch-card-callout-font-size)/var(--consonant-merch-card-callout-line-height) Adobe Clean;
+    letter-spacing: var(--consonant-merch-card-callout-letter-spacing);
+    color: var(--consonant-merch-card-callout-font-color);
+}
+
+merch-card [slot='callout-text'] img {
+    position: absolute;
+    top: var(--consonant-merch-card-callout-icon-top);
+    right: var(--consonant-merch-card-callout-icon-right);
+    width: var(--consonant-merch-card-callout-icon-size);
+    height: var(--consonant-merch-card-callout-icon-size);
+}
+
+merch-card[variant="mini-compare-chart"] [slot="callout-text"] {
+    padding: 0px var(--consonant-merch-spacing-s);
+}
+
 merch-card [slot='detail-m'] {
     font-size: var(--consonant-merch-card-detail-m-font-size);
     letter-spacing: var(--consonant-merch-card-detail-m-letter-spacing);
diff --git a/web-components/src/merch-card.js b/web-components/src/merch-card.js
index fffcc6cd..801afe37 100644
--- a/web-components/src/merch-card.js
+++ b/web-components/src/merch-card.js
@@ -358,6 +358,7 @@ export class MerchCard extends LitElement {
                 <slot name="heading-xs"></slot>
                 <slot name="body-xxs"></slot>
                 <slot name="promo-text"></slot>
+                <slot name="callout-text"></slot>
                 <slot name="body-xs"></slot>
             </div>
             <hr />
@@ -372,7 +373,8 @@ export class MerchCard extends LitElement {
                 <slot name="heading-m"></slot>
                 <slot name="body-xxs"></slot>
                 <slot name="promo-text"></slot>
-                <slot name="body-xs"></slot>                
+                <slot name="callout-text"></slot>            
+                <slot name="body-xs"></slot>    
                 ${this.stockCheckbox}
             </div>
             <slot name="quantity-select"></slot>
@@ -406,9 +408,9 @@ export class MerchCard extends LitElement {
                 <slot name="heading-xs"></slot>
                 <slot name="heading-m"></slot>
                 <slot name="body-xxs"></slot>
-                ${!this.promoBottom ? html`<slot name="promo-text"></slot>`: ''}
+                ${!this.promoBottom ? html`<slot name="promo-text"></slot><slot name="callout-text"></slot>`: ''}
                 <slot name="body-xs"></slot>
-                ${this.promoBottom ? html`<slot name="promo-text"></slot>`: ''}
+                ${this.promoBottom ? html`<slot name="promo-text"></slot><slot name="callout-text"></slot>`: ''}
             </div>
             ${this.secureLabelFooter}`;
     }
@@ -456,6 +458,7 @@ export class MerchCard extends LitElement {
                 <slot name="heading-xs"></slot>
                 <slot name="body-xxs"></slot>
                 <slot name="promo-text"></slot>
+                <slot name="callout-text"></slot>
                 <slot name="body-xs"></slot>
             </div>
             ${this.secureLabelFooter}`;
@@ -474,6 +477,7 @@ export class MerchCard extends LitElement {
             <slot name="price-commitment"></slot>
             <slot name="offers"></slot>
             <slot name="promo-text"></slot>
+            <slot name="callout-text"></slot>
             ${this.miniCompareFooter}
             <slot name="footer-rows"><slot name="body-s"></slot></slot>`;
     }
diff --git a/web-components/test/img/info-icon.svg b/web-components/test/img/info-icon.svg
new file mode 100644
index 00000000..12e6751b
--- /dev/null
+++ b/web-components/test/img/info-icon.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
+  <defs>
+    <style>
+      .fill {
+        fill: #464646;
+      }
+    </style>
+  </defs>
+  <title>S Info 18 N</title>
+  <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="fill" d="M9,1a8,8,0,1,0,8,8A8,8,0,0,0,9,1ZM8.85,3.15a1.359,1.359,0,0,1,1.43109,1.28286q.00352.06452.00091.12914A1.332,1.332,0,0,1,8.85,5.9935a1.3525,1.3525,0,0,1-1.432-1.432A1.3585,1.3585,0,0,1,8.72033,3.14907Q8.78516,3.14643,8.85,3.15ZM11,13.5a.5.5,0,0,1-.5.5h-3a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5H8V9H7.5A.5.5,0,0,1,7,8.5v-1A.5.5,0,0,1,7.5,7h2a.5.5,0,0,1,.5.5V12h.5a.5.5,0,0,1,.5.5Z" />
+</svg>
\ No newline at end of file
diff --git a/web-components/test/merch-card.mini-compare.test.html b/web-components/test/merch-card.mini-compare.test.html
index 3c96ed48..3ca7915b 100644
--- a/web-components/test/merch-card.mini-compare.test.html
+++ b/web-components/test/merch-card.mini-compare.test.html
@@ -407,6 +407,162 @@ <h5 id="price---abm---creative-cloud-all-apps-with-4tb" slot="heading-m-price"><
                 </div>
             </merch-card>
         </div>
+        <div class="two-merch-cards mini-compare-chart">
+            <merch-card class="merch-card mini-compare-chart" variant="mini-compare-chart"
+                badge-background-color="#EDCC2D" badge-color="#000000" badge-text="Most popular" filters="all" types=""
+                tabindex="0" style="border: 1px solid rgb(237, 204, 45);">
+
+                <p slot="promo-text" class="promo-text">This is promo text <a href="https://adobe.com/"
+                        target="_blank">with a
+                        link</a></p>
+                <div slot="body-m">
+                    <p></p>
+                    <p>Get Illustrator on desktop and iPad as part of Creative Cloud.</p>
+                </div>
+                <p slot="price-commitment" class="price-commitment"></p>
+                <h3 id="creative-cloud-all-apps" slot="heading-m">Creative Cloud All Apps
+                </h3>
+                <h4 id="this-is-promo-text-with-a-link" slot="detail-m">This is promo text <a href="https://adobe.com/"
+                        target="_blank">with a link</a></h4>
+                <div slot="callout-text">
+                    <div class="callout-content-wrapper-with-icon">
+                        <div>AI Assistant add-on available </div>
+                        <img src="./img/info-icon.svg" title="this is a dummy tooltip text" class="callout-icon"/>
+                    </div>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <h5 id="price---abm---creative-cloud-all-apps-with-4tb" slot="heading-m-price"><span is="inline-price"
+                        data-display-old-price="true" data-display-per-unit="false" data-display-recurrence="true"
+                        data-display-tax="false" data-force-tax-exclusive="false" data-quantity="1"
+                        data-template="price" data-wcs-osi="abm"></span></h5>
+                    <p class="action-area" slot="footer">
+                        <a href="https://business.adobe.com/" class="con-button outline button-l" target="_blank">free
+                            trial</a>
+                        <a href="https://business.adobe.com/" class="con-button blue button-l" target="_blank">Buy now</a>
+                    </p>
+                <div slot="offers">
+                    <merch-quantity-select title="Select a quantity:" min="1" max="10" step="1"
+                        default-value="undefined" max-input="undefined" closed=""></merch-quantity-select>
+                </div>
+                <div slot="footer-rows">
+                    <div class="footer-row-cell">
+                        <picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
+                                alt="Creative Cloud"></picture>
+                        <div class="footer-row-cell-description">Illustrator on desktop, web, and iPad</div>
+                    </div>
+                    <div class="footer-row-cell">
+                        <picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
+                                alt="Creative Cloud"></picture>
+                        <div class="footer-row-cell-description">Access to 20+ apps including Photoshop, Illustrator
+                            Premiere Pro, After Effects, InDesign, Lightroom, and more</div>
+                    </div>
+                    <div class="footer-row-cell">
+                        <picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
+                                alt="Creative Cloud"></picture>
+                        <div class="footer-row-cell-description">
+                            <p>Business features like admin tools, dedicated 24x7</p>
+                            <p>support, and 1TB of cloud storage</p>
+                        </div>
+                    </div>
+                    <div class="footer-row-cell">
+                        <picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
+                                alt="Creative Cloud"></picture>
+                        <div class="footer-row-cell-description">Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe
+                            Fonts</div>
+                    </div>
+                    <div class="footer-row-cell">
+                        <picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
+                                alt="Creative Cloud"></picture>
+                        <div class="footer-row-cell-description">1,000 <a href="https://adobe.com/"
+                                target="_blank">generative
+                                credits</a></div>
+                    </div>
+                </div>
+            </merch-card>
+            <merch-card class="merch-card mini-compare-chart" variant="mini-compare-chart"
+                badge-background-color="#EDCC2D" badge-color="#000000" badge-text="Most popular" filters="all" types=""
+                tabindex="0" style="border: 1px solid rgb(237, 204, 45);">
+
+                <p slot="promo-text" class="promo-text">This is promo text <a href="https://adobe.com/"
+                        target="_blank">with a
+                        link</a></p>
+                <div slot="body-m">
+                    <p></p>
+                    <p>Get Illustrator on desktop and iPad as part of Creative Cloud.</p>
+                </div>
+                <p slot="price-commitment" class="price-commitment"></p>
+                <h3 id="creative-cloud-all-apps" slot="heading-m">Creative Cloud All Apps
+                </h3>
+                <h4 id="this-is-promo-text-with-a-link" slot="detail-m">This is promo text <a href="https://adobe.com/"
+                        target="_blank">with a link</a></h4>
+                <div slot="callout-text">
+                    <div class="callout-content-wrapper-with-icon">
+                        <div>AI Assistant add-on available </div>
+                        <img src="./img/info-icon.svg" title="this is a dummy tooltip text" class="callout-icon"/>
+                    </div>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <h5 id="price---abm---creative-cloud-all-apps-with-4tb" slot="heading-m-price"><span is="inline-price"
+                        data-display-old-price="true" data-display-per-unit="false" data-display-recurrence="true"
+                        data-display-tax="false" data-force-tax-exclusive="false" data-quantity="1"
+                        data-template="price" data-wcs-osi="abm"></span></h5>
+                    <p class="action-area" slot="footer">
+                        <a href="https://business.adobe.com/" class="con-button outline button-l" target="_blank">free
+                            trial</a>
+                        <a href="https://business.adobe.com/" class="con-button blue button-l" target="_blank">Buy now</a>
+                    </p>
+                <div slot="offers">
+                    <merch-quantity-select title="Select a quantity:" min="1" max="10" step="1"
+                        default-value="undefined" max-input="undefined" closed=""></merch-quantity-select>
+                </div>
+                <div slot="footer-rows">
+                    <div class="footer-row-cell">
+                        <picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
+                                alt="Creative Cloud"></picture>
+                        <div class="footer-row-cell-description">Illustrator on desktop, web, and iPad</div>
+                    </div>
+                    <div class="footer-row-cell">
+                        <picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
+                                alt="Creative Cloud"></picture>
+                        <div class="footer-row-cell-description">Access to 20+ apps including Photoshop, Illustrator
+                            Premiere Pro, After Effects, InDesign, Lightroom, and more</div>
+                    </div>
+                    <div class="footer-row-cell">
+                        <picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
+                                alt="Creative Cloud"></picture>
+                        <div class="footer-row-cell-description">
+                            <p>Business features like admin tools, dedicated 24x7</p>
+                            <p>support, and 1TB of cloud storage</p>
+                        </div>
+                    </div>
+                    <div class="footer-row-cell">
+                        <picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
+                                alt="Creative Cloud"></picture>
+                        <div class="footer-row-cell-description">Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe
+                            Fonts</div>
+                    </div>
+                    <div class="footer-row-cell">
+                        <picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
+                                alt="Creative Cloud"></picture>
+                        <div class="footer-row-cell-description">1,000 <a href="https://adobe.com/"
+                                target="_blank">generative
+                                credits</a></div>
+                    </div>
+                </div>
+            </merch-card>
+        </div>
         <div class="one-merch-card mini-compare-chart">
 
             <merch-card class="merch-card mini-compare-chart" variant="mini-compare-chart"
diff --git a/web-components/test/merch-card.test.html b/web-components/test/merch-card.test.html
index ca427a77..2e28f68a 100644
--- a/web-components/test/merch-card.test.html
+++ b/web-components/test/merch-card.test.html
@@ -678,6 +678,7 @@ <h4 slot="heading-xs">Acrobat Pro</h4>
                 style="border: 1px solid rgb(45, 157, 120);">
                 <h3 id="merch-card-background-opacity-70-segment" class="card-heading" slot="heading-xs">merch-card aaa bbbccc dddeee bbbccc dddeee</h3>
                 <div slot="body-xs">
+                    <h5 id="this-is-the-green-promo-text-with-link">This is the green promo text with <a href="https://www.adobe.com">link</a>!</h5>
                     <p>Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27 here is an
                         inline price <span is="inline-price" data-display-old-price="true" data-display-per-unit="false"
                             data-display-recurrence="true" data-display-tax="false" data-force-tax-exclusive="false"
@@ -689,9 +690,381 @@ <h3 id="merch-card-background-opacity-70-segment" class="card-heading" slot="hea
                             more</a></p>
                     <p class="action-area"></p>
                 </div>
+                <div slot="callout-text">
+                    <div class="callout-content-wrapper-with-icon">
+                        <div>AI Assistant add-on available </div>
+                        <img src="./img/info-icon.svg" title="this is a dummy tooltip text" class="callout-icon"/>
+                    </div>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <div slot="footer"><a href="https://business.adobe.com/" class="con-button blue" target="_blank">Save now</a></div>
+            </merch-card>
+            <merch-card class="merch-card background-opacity-70 segment badge-card" variant="segment" size=""
+                badge-background-color="#2D9D78" badge-color="#fff" badge-text="Save a lot" filters="all" types="" tabindex="0"
+                style="border: 1px solid rgb(45, 157, 120);">
+                <h3 id="merch-card-background-opacity-70-segment" class="card-heading" slot="heading-xs">Photoshop</h3>
+                <div slot="body-xs">
+                    <p>Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27 here is an
+                        inline price <span is="inline-price" data-display-old-price="true" data-display-per-unit="false"
+                            data-display-recurrence="true" data-display-tax="false" data-force-tax-exclusive="false"
+                            data-quantity="1" data-template="price"
+                            data-wcs-osi="abm"></span>
+                    </p>
+                    <p><a href="https://www.adobe.com/creativecloud.html#cc-see-whats-included" target="_blank">See what's
+                            included</a> | <a href="https://www.adobe.com/creativecloud/all-apps.html" target="_blank">Learn
+                            more</a></p>
+                    <p class="action-area"></p>
+                </div>
+                <div slot="callout-text">
+                    <div class="callout-content-wrapper-with-icon">
+                        <div>AI Assistant add-on available </div>
+                        <img src="./img/info-icon.svg" title="this is a dummy tooltip text" class="callout-icon"/>
+                    </div>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <div slot="footer"><a href="https://business.adobe.com/" class="con-button blue" target="_blank">Save now</a></div>
+            </merch-card>
+            <merch-card class="merch-card background-opacity-70 segment badge-card" variant="segment" size=""
+                badge-background-color="#2D9D78" badge-color="#fff" badge-text="Save a lot" filters="all" types="" tabindex="0"
+                style="border: 1px solid rgb(45, 157, 120);">
+                <h3 id="merch-card-background-opacity-70-segment" class="card-heading" slot="heading-xs">Acrobat</h3>
+                <div slot="body-xs">
+                    <p>Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27 here is an
+                        inline price <span is="inline-price" data-display-old-price="true" data-display-per-unit="false"
+                            data-display-recurrence="true" data-display-tax="false" data-force-tax-exclusive="false"
+                            data-quantity="1" data-template="price"
+                            data-wcs-osi="abm"></span>
+                    </p>
+                    <p><a href="https://www.adobe.com/creativecloud.html#cc-see-whats-included" target="_blank">See what's
+                            included</a> | <a href="https://www.adobe.com/creativecloud/all-apps.html" target="_blank">Learn
+                            more</a></p>
+                    <p class="action-area"></p>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
                 <div slot="footer"><a href="https://business.adobe.com/" class="con-button blue" target="_blank">Save now</a></div>
             </merch-card>
         </div>
+        <div class="three-merch-cards product">
+            <merch-card class="merch-card background-opacity-70 segment badge-card" variant="segment" size=""
+                badge-background-color="#2D9D78" badge-color="#fff" badge-text="Save a lot" filters="all" types="" tabindex="0"
+                style="border: 1px solid rgb(45, 157, 120);">
+                <h3 id="merch-card-background-opacity-70-segment" class="card-heading" slot="heading-xs">merch-card aaa bbbccc dddeee bbbccc dddeee</h3>
+                <div slot="body-xs">
+                    <p>Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27 here is an
+                        inline price <span is="inline-price" data-display-old-price="true" data-display-per-unit="false"
+                            data-display-recurrence="true" data-display-tax="false" data-force-tax-exclusive="false"
+                            data-quantity="1" data-template="price"
+                            data-wcs-osi="abm"></span>
+                    </p>
+                    <p><a href="https://www.adobe.com/creativecloud.html#cc-see-whats-included" target="_blank">See what's
+                            included</a> | <a href="https://www.adobe.com/creativecloud/all-apps.html" target="_blank">Learn
+                            more</a></p>
+                    <p class="action-area"></p>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <div slot="footer"><a href="https://business.adobe.com/" class="con-button blue" target="_blank">Save now</a></div>
+            </merch-card>
+            <merch-card class="merch-card background-opacity-70 segment badge-card" variant="segment" size=""
+                badge-background-color="#2D9D78" badge-color="#fff" badge-text="Save a lot" filters="all" types="" tabindex="0"
+                style="border: 1px solid rgb(45, 157, 120);">
+                <h3 id="merch-card-background-opacity-70-segment" class="card-heading" slot="heading-xs">Photoshop</h3>
+                <div slot="body-xs">
+                    <p>Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27 here is an
+                        inline price <span is="inline-price" data-display-old-price="true" data-display-per-unit="false"
+                            data-display-recurrence="true" data-display-tax="false" data-force-tax-exclusive="false"
+                            data-quantity="1" data-template="price"
+                            data-wcs-osi="abm"></span>
+                    </p>
+                    <p slot="promo-text" class="promo-text">This is promo text <a href="https://adobe.com/"
+                        target="_blank">with a
+                        link</a></p>
+                    <div slot="body-xs">
+                        <p>Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27 here is an
+                            inline price <span is="inline-price" data-display-old-price="true" data-display-per-unit="false"
+                                data-display-recurrence="true" data-display-tax="false" data-force-tax-exclusive="false"
+                                data-quantity="1" data-template="price"
+                                data-wcs-osi="abm"></span>
+                        </p>
+                        <p><a href="https://www.adobe.com/creativecloud.html#cc-see-whats-included" target="_blank">See what's
+                                included</a> | <a href="https://www.adobe.com/creativecloud/all-apps.html" target="_blank">Learn
+                                more</a></p>
+                        <p class="action-area"></p>
+                    </div>
+                    <p><a href="https://www.adobe.com/creativecloud.html#cc-see-whats-included" target="_blank">See what's
+                            included</a> | <a href="https://www.adobe.com/creativecloud/all-apps.html" target="_blank">Learn
+                            more</a></p>
+                    <p class="action-area"></p>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <div slot="footer"><a href="https://business.adobe.com/" class="con-button blue" target="_blank">Save now</a></div>
+            </merch-card>
+            <merch-card class="merch-card background-opacity-70 segment badge-card" variant="segment" size=""
+                badge-background-color="#2D9D78" badge-color="#fff" badge-text="Save a lot" filters="all" types="" tabindex="0"
+                style="border: 1px solid rgb(45, 157, 120);">
+                <h3 id="merch-card-background-opacity-70-segment" class="card-heading" slot="heading-xs">Acrobat</h3>
+                <div slot="body-xs">
+                    <p>Save over 25% on 20+ apps, including Photoshop, Illustrator, and more. First year only. Ends 27 here is an
+                        inline price <span is="inline-price" data-display-old-price="true" data-display-per-unit="false"
+                            data-display-recurrence="true" data-display-tax="false" data-force-tax-exclusive="false"
+                            data-quantity="1" data-template="price"
+                            data-wcs-osi="abm"></span>
+                    </p>
+                    <p><a href="https://www.adobe.com/creativecloud.html#cc-see-whats-included" target="_blank">See what's
+                            included</a> | <a href="https://www.adobe.com/creativecloud/all-apps.html" target="_blank">Learn
+                            more</a></p>
+                    <p class="action-area"></p>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <div slot="footer"><a href="https://business.adobe.com/" class="con-button blue" target="_blank">Save now</a></div>
+            </merch-card>
+        </div>
+        <div class="four-merch-cards catalog">
+            <merch-card size="wide" variant="catalog" action-menu="true" badge-color="#EDCC2D"
+                badge-background-color="#000000" badge-text="Best value">
+                <merch-icon slot="icons" size="l" src="../test/img/cc-logo.png" alt="Creative Cloud All Apps"
+                    href="https://www.adobe.com/creativecloud/all-apps.html"></merch-icon>
+                <div slot="action-menu-content">
+                    <p><strong>Best for</strong>:</p>
+                    <ul>
+                        <li>Photo editing</li>
+                        <li>Compositing</li>
+                        <li>Drawing and painting</li>
+                        <li>Graphic design</li>
+                    </ul>
+                    <p><strong>Storage</strong>:</p>
+                    <p>100 GB of cloud storage</p>
+                    <p><a href="https://adobe.com">See system requirements</a></p>
+                </div>
+                <h4 slot="heading-xs"><a href="https://www.adobe.com/creativecloud/all-apps.html">Photography</a></h4>
+                <h3 slot="heading-m">
+                    <span is="inline-price" data-display-per-unit="false" data-display-recurrence="true"
+                        data-display-tax="false" data-template="priceOptical" data-wcs-osi="abm-edu"></span>
+                </h3>
+                <div slot="body-xs">
+                    <p>Lightroom, Lightroom Classic, Photoshop on desktop and iPad, and 1TB of cloud storage.</p>
+                    <p><a href="https://adobe.com">Learn more</a></p>
+                </div>
+                <div slot="callout-text">
+                    <div class="callout-content-wrapper-with-icon">
+                        <div>AI Assistant add-on available </div>
+                        <img src="./img/info-icon.svg" title="this is a dummy tooltip text" class="callout-icon"/>
+                    </div>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <div slot="footer">
+                    <a href="https://business.adobe.com/" class="con-button outline">Free trial</a>
+                    <a href="https://business.adobe.com/" class="con-button blue">Save now</a>
+                </div>
+            </merch-card>
+            <merch-card variant="catalog" action-menu="true" badge-color="#EDCC2D" badge-background-color="#000000"
+                badge-text="Best value">
+                <merch-icon slot="icons" size="l" src="../test/img/cc-logo.png"
+                    alt="Creative Cloud All Apps"></merch-icon>
+                <div slot="action-menu-content">
+                    <p><strong>Best for</strong>:</p>
+                    <ul>
+                        <li>Photo editing</li>
+                        <li>Compositing</li>
+                        <li>Drawing and painting</li>
+                        <li>Graphic design</li>
+                    </ul>
+                    <p><strong>Storage</strong>:</p>
+                    <p>100 GB of cloud storage</p>
+                    <p><a href="https://adobe.com">See system requirements</a></p>
+                </div>
+                <h4 slot="heading-xs">Photography</h4>
+                <h3 slot="heading-m">
+                    <span is="inline-price" data-display-per-unit="false" data-display-recurrence="true"
+                        data-display-tax="false" data-template="priceOptical" data-wcs-osi="abm-edu"></span>
+                </h3>
+                <div slot="body-xs">
+                    <p>Lightroom, Lightroom Classic, Photoshop on desktop and iPad, and 1TB of cloud storage.</p>
+                    <p><a href="https://adobe.com">Learn more</a></p>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <div slot="footer">
+                    <a href="https://business.adobe.com/">Android</a>
+                    <a href="https://business.adobe.com/">IOS</a>
+                    <a href="https://business.adobe.com/" class="con-button blue">Save now</a>
+                </div>
+            </merch-card>
+            <merch-card class="merch-card catalog badge-card" variant="catalog" size="" badge-background-color="#EDCC2D"
+                badge-color="#000000" badge-text="Most popular" filters="all" types="" tabindex="0"
+                style="border: 1px solid rgb(237, 204, 45);">
+                <h3 class="card-heading" slot="heading-xs">Creative Cloud All Apps</h3>
+                <h4 class="card-heading" slot="heading-m"><span
+                        is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-display-recurrence="true"
+                        data-display-tax="false" data-force-tax-exclusive="false" data-quantity="1" data-template="price"
+                        data-wcs-osi="abm"></span></h4>
+                <h5 id="desktop-2" class="card-heading" slot="body-xxs">Desktop</h5>
+                <div slot="body-xs">
+                    <p></p>
+                    <p>Get 20+ creative apps including Photoshop, Illustrator, Premiere Pro, Acrobat Pro, and Adobe Express.
+                        (Substance 3D apps are not included.)</p>
+                    <p><a href="https://adobe.com/" target="_blank">See what’s included</a> | <a href="https://adobe.com/" target="_blank">Learn more</a></p>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <merch-icon slot="icons" src="http://localhost:6456/assets/img/creative-cloud.svg" alt="Creative Cloud"
+                    href="" size="l"></merch-icon>
+                <p class="action-area" slot="footer"><a href="https://business.adobe.com/" class="con-button blue" target="_blank">Buy now</a> <a href="https://business.adobe.com/" class="con-button outline" target="_blank">free trial</a></p>
+            </merch-card>
+        </div>
+        <div class="three-merch-cards plans">
+            <merch-card variant="plans" badge-color="#EDCC2D" badge-background-color="#000000"" badge-text=" Best value"
+                secure-label="Secure Transaction" checkbox-label="Add a 30-day free trial of Adobe Stock.*"
+                stock-offer-osis="stock-puf,stock-abm,stock-m2m">
+                <merch-icon slot="icons" size="l" src="../test/img/cc-logo.png"
+                    alt="Creative Cloud All Apps"></merch-icon>
+                <h4 slot="heading-xs">Creative Cloud All Apps</h4>
+                <h3 slot="heading-m">
+                    <span is="inline-price" data-display-per-unit="false" data-display-recurrence="true"
+                        data-display-tax="false" data-wcs-osi="m2m"></span>
+                </h3>
+                <p slot="body-xxs" id="individuals1">Desktop</p>
+                <div slot="body-xs">
+                    <p>Get 20+ Creative Cloud apps including Photoshop, Illustrator, Adobe Express, Premiere Pro, and
+                        Acrobat Pro. (Substance 3D apps are not included.)</p>
+                    <p>
+                    <a href="https://adobe.com">See plans & pricing details</a></p>
+                </div>
+                <div slot="callout-text">
+                    <div class="callout-content-wrapper-with-icon">
+                        <div>AI Assistant add-on available </div>
+                        <img src="./img/info-icon.svg" title="this is a dummy tooltip text" class="callout-icon"/>
+                    </div>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <div slot="footer">
+                    <a is="checkout-link" href="#" class="con-button blue active" data-wcs-osi="m2m">Save now</a>
+                </div>
+            </merch-card>
+            <merch-card variant="plans" badge-color="#EDCC2D" badge-background-color="#000000"" badge-text=" Best value"
+                checkbox-label="Add a 30-day free trial of Adobe Stock.*"
+                stock-offer-osis="stock-puf,stock-abm,stock-m2m">
+                <merch-icon slot="icons" size="l" src="../test/img/cc-logo.png"
+                    alt="Creative Cloud All Apps"></merch-icon>
+                <h4 slot="heading-xs">Photography</h4>
+                <h3 slot="heading-m">
+                    <span is="inline-price" data-display-per-unit="false" data-display-recurrence="true"
+                        data-display-tax="false" data-wcs-osi="abm"></span>
+                </h3>
+                <p slot="body-xxs" id="individuals1">Desktop + Mobile</p>
+                <div slot="body-xs">
+                    <p>Lightroom, Lightroom Classic, Photoshop on desktop and iPad, and 1TB of cloud storage.</p>
+                    <p><a href="https://adobe.com">Compare photography plans</a></p>
+                    <p><a href="https://adobe.com">See plans & pricing details</a></p>
+                </div>
+                <div slot="callout-text">
+                    <div class="callout-content-wrapper-with-icon">
+                        <div>AI Assistant add-on available </div>
+                        <img src="./img/info-icon.svg" title="this is a dummy tooltip text" class="callout-icon"/>
+                    </div>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <div slot="footer">
+                    <a is="checkout-link" href="#" class="con-button blue active" data-wcs-osi="abm">Save now</a>
+                </div>
+            </merch-card>
+            <merch-card variant="plans" badge-color="#EDCC2D" badge-background-color="#000000"" badge-text=" Best value"
+                checkbox-label="Add a 30-day free trial of Adobe Stock.*"
+                stock-offer-osis="stock-puf,stock-abm,stock-m2m">
+                <merch-icon slot="icons" size="l" src="../test/img/cc-logo.png"
+                    alt="Creative Cloud All Apps"></merch-icon>
+                <h4 slot="heading-xs">Photography</h4>
+                <h3 slot="heading-m">
+                    <span is="inline-price" data-display-per-unit="false" data-display-recurrence="true"
+                        data-display-tax="false" data-wcs-osi="puf"></span>
+                </h3>
+                <p slot="body-xxs" id="individuals1">Desktop + Mobile</p>
+                <div slot="body-xs">
+                    <p>Lightroom, Lightroom Classic, Photoshop on desktop and iPad, and 1TB of cloud storage.</p>
+                    <p><a href="https://adobe.com">Compare photography plans</a></p>
+                    <p><a href="https://adobe.com">See plans & pricing details</a></p>
+                </div>
+                <div slot="callout-text">
+                    <div class="callout-content-wrapper-with-icon">
+                        <div>AI Assistant add-on available </div>
+                        <img src="./img/info-icon.svg" title="this is a dummy tooltip text" class="callout-icon"/>
+                    </div>
+                </div>
+                <div slot="callout-text">
+                    <div>
+                        <div>
+                            For a limited time pay
+                            <span is="inline-price" data-display-old-price="true" data-display-per-unit="false" data-quantity="1" data-template="price" data-wcs-osi="Mutn1LYoGojkrcMdCLO7LQlx1FyTHw27ETsfLv0h8DQ" class="placeholder-failed"></span> when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
+                    </div>
+                </div>
+                <div slot="footer">
+                    <a is="checkout-link" href="#" class="con-button blue active" data-wcs-osi="puf">Save now</a>
+                </div>
+            </merch-card>
+        </div>
     </main>
 </body>